@import "./table-list.tailwind.css";
@import "./tabs.tailwind.css";
@import "./dropdown.tailwind.css";
@import "./sidebar.tailwind.css";
@import "./space-sidebar.tailwind.css";
@import "./content.tailwind.css";
@import "./form.tailwind.css";
@import "./automation.tailwind.css";
@import "./modal.tailwind.css";
@import "./lozenges.tailwind.css";
@import "./reactions.tailwind.css";
@import "./mentions.tailwind.css";
@import "./popover.tailwind.css";
@import "./react-select.tailwind.css";
@import "./blocknote.tailwind.css";
@import "./collapsible.tailwind.css";
@import "./flash.tailwind.css";
@import "./badge.tailwind.css";
@import "./object-icon.tailwind.css";

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

@layer base {
    /*
     * Do not add any additional selectors in base section like button:disabled:not(.link-button) otherwise
     * it will be very difficult to override those styles in other layers.
     */

    body {
        @apply content-container;
        @apply md:bg-gray-100;
        @apply dark:md:bg-gray-900;
        @apply antialiased;
    }

    a.default-link {
        @apply text-primary-blue-500 hover:underline;
    }

    label {
        @apply dark:text-white;
    }

    button:disabled,
    input:disabled {
        @apply cursor-not-allowed;
    }

    input:disabled {
        @apply bg-slate-950/5 text-slate-950/40;
        @apply dark:bg-slate-300/5 dark:text-slate-300/40;
    }

    button:disabled,
    button:disabled:active,
    .disabled-button {
        @apply bg-slate-950/5 text-slate-950/40;
        @apply dark:text-gray-500;
        @apply focus-visible:outline-none;
    }

    *,:after,:before {
        @apply dark:border-gray-600;
    }
}

@layer components {
    /*
     * Iconify emits a Tabler icon as an inline-block 1em square with no vertical-align, so one
     * dropped into running text rests its bottom edge on the baseline and rides 2-3px above the
     * text's centre. Lowering it by 0.125em centres it on the x-height of the adjacent text.
     * The rule is for bare <i> icons only: vertical-align does nothing on flex items, which covers
     * the icons in flex rows. The named icon slots and the reaction button, whose icon is the
     * only content of its box, are left out because they size and align themselves.
     */
    i[class*="icon-[tabler--"]:not(.tabs-tab-icon, .tabs-label-icon, .modal-icon, .empty-state-icon, .object-icon > *, .create-reaction-button > *) {
        vertical-align: -0.125em;
    }

    .top-nav-bar {
        @apply bg-white border-gray-200;
        @apply dark:border-gray-600 dark:bg-gray-800;
        @apply border-b-2 px-2 py-2.5;
    }

    .button {
        @apply px-6 py-2 leading-5 rounded-md font-semibold inline-flex items-center text-sm ;
    }

    .focused-section {
        @apply form-section;
        @apply relative overflow-x-auto;
    }

    .secondary-button {
        @apply button;
        @apply bg-white text-gray-900 hover:bg-gray-100 active:bg-gray-200;
        @apply dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-50 dark:active:bg-gray-600;
        @apply shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600;
    }

    .danger-button {
        @apply bg-red-600 text-white hover:bg-red-500;
        @apply dark:bg-red-900 dark:hover:bg-red-800;
    }

    .first-button-group {
        @apply relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10;
        @apply dark:bg-gray-800 dark:ring-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-gray-50
    }

    .primary-button {
        @apply secondary-button;
        @apply bg-primary-orange-400 text-slate-900 hover:bg-primary-orange-300 hover:text-slate-800;
        @apply dark:bg-primary-orange-400 dark:text-slate-900 dark:hover:bg-primary-orange-300 dark:hover:text-slate-800;
    }

    button:disabled:not(.link-button).primary-button {
        @apply bg-primary-orange-400/40 text-slate-950/40;
    }

    .link-button {
        @apply font-medium text-primary-blue-500 dark:text-secondary-blue-500;
        /* A line of small text is 20px tall, under the 24px a finger needs */
        @apply touch:py-0.5;
    }

    .link-button:not(:disabled) {
        @apply hover:underline
    }

    .link-button:disabled,
    .link-button:disabled:active {
        @apply text-neutral-400;
        @apply bg-transparent;
    }
}
/*
 * Command palette (ninja-keys). Its rows live in shadow roots: custom properties inherit into
 * them, and each icon carries part="ninja-icon" so ::part can reach it. Every icon, Tabler SVG
 * or title emoji, takes the same 16px slot as icons elsewhere in the app, so titles line up.
 */
ninja-keys {
    --ninja-icon-size: 16px;
}

ninja-keys::part(ninja-icon) {
    flex-shrink: 0;
    width: var(--ninja-icon-size);
    height: var(--ninja-icon-size);
    /* An emoji is about 1.25em wide, so this fits it to the slot. */
    font-size: calc(var(--ninja-icon-size) * 0.8);
    line-height: var(--ninja-icon-size);
    text-align: center;
    /* ninja-keys' 1em margin was sized for its larger default icon */
    margin-right: 10px;
}
@layer components {
    .example-code-container {
        @apply w-full mx-auto my-5;

        pre {
            @apply bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto;
        }
    }
}
@layer components {
    .badge {
        @apply inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset;
    }

    .badge-gray {
        @apply badge bg-gray-50 text-gray-600 ring-gray-500/10;
        @apply dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20;
    }

    .badge-red {
        @apply badge bg-red-50 text-red-700 ring-red-600/10;
        @apply dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20;
    }

    .badge-yellow {
        @apply badge bg-yellow-50 text-yellow-800 ring-yellow-600/20;
        @apply dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20;
    }

    .badge-green {
        @apply badge bg-green-50 text-green-700 ring-green-600/20;
        @apply dark:bg-green-400/10 dark:text-green-400 dark:ring-green-500/20;
    }

    .badge-blue {
        @apply badge bg-blue-50 text-blue-700 ring-blue-700/10;
        @apply dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30;
    }

    .badge-indigo {
        @apply badge bg-indigo-50 text-indigo-700 ring-indigo-700/10;
        @apply dark:bg-indigo-400/10 dark:text-indigo-400 dark:ring-indigo-400/30;
    }

    .badge-purple {
        @apply badge bg-purple-50 text-purple-700 ring-purple-700/10;
        @apply dark:bg-purple-400/10 dark:text-purple-400 dark:ring-purple-400/30;
    }

    .badge-pink {
        @apply badge bg-pink-50 text-pink-700 ring-pink-700/10;
        @apply dark:bg-pink-400/10 dark:text-pink-400 dark:ring-pink-400/20;
    }

    .badge-orange {
        @apply badge bg-orange-50 text-orange-700 ring-orange-600/20;
        @apply dark:bg-orange-400/10 dark:text-orange-400 dark:ring-orange-400/20;
    }
}
.bn-container[data-color-scheme] .bn-editor * {
  & [data-content-type="heading"] {
    --level: 1.5em;
  }
  & [data-content-type="heading"][data-level="2"] {
    --level: 1.25em;
  }
  & [data-content-type="heading"][data-level="3"] {
    --level: 1em;
  }
}

/* Read more about styling BlockNote at https://www.blocknotejs.org/docs/styling-theming/themes */
.bn-container[data-color-scheme][data-document-editor],
.bn-container[data-color-scheme][data-comment-editor] {
  --bn-border-radius: 0;
  --bn-colors-editor-background: transparent;
}

/* Ensure BlockNote editor inherits the correct font */
.bn-container[data-document-editor] .bn-inline-content {
  @apply font-ia-writer-quattro;
}

/* Simple `code` block */
.bn-container .bn-editor .bn-inline-content code {
  background-color: rgb(241 245 249); /* bg-slate-100 */
  border: 1px solid rgb(203 213 225); /* border-slate-300 */
  border-radius: 4px;
  color: rgb(51 65 85);
  padding: 0 3px;
}

@media (prefers-color-scheme: dark) {
  .bn-container .bn-editor .bn-inline-content code {
    background-color: rgb(71 85 105); /* bg-slate-600 */
    color: rgb(226 232 240); /* text-slate-200 */
    border: 1px solid rgb(100 116 139); /* border-slate-500 */
  }
}

/* uncomment this to make the selected block outline hidden */
/*
.ProseMirror-selectednode > .bn-block-content > *,
.bn-block-content.ProseMirror-selectednode > * {
    outline: none !important;
}
*/

@media (prefers-color-scheme: dark) {
  .ProseMirror-selectednode .bn-file-name-with-icon {
    background-color: rgb(75 85 99); /* bg-gray-400 */
  }
  .ProseMirror-selectednode .bn-file-name-with-icon:hover {
    background-color: rgb(107 114 128); /* bg-gray-500 */
  }
}

[data-document-editor] a {
    @apply underline cursor-pointer text-primary-blue-500;
}

[data-document-editor].read-only .bn-editor {
    @apply px-5;
}

/* Make document and comment editors fill available space for better drag-and-drop */
[data-document-editor] {
    @apply flex-1 flex flex-col;
}

[data-document-editor] .bn-editor {
    @apply flex-1;
}

[data-comment-editor] {
    @apply flex-1 flex flex-col;
}

[data-comment-editor] .bn-editor {
    @apply flex-1;
}

/*
 * Fix BlockNote checklist checkboxes to use Tailwind forms plugin styling.
 *
 * BlockNote renders a check list item as `<div contenteditable="false"><input type="checkbox"></div><p>`
 * and its own stylesheet stretches that input to 12x24px. Its styles are injected by Vite at runtime,
 * so they land after this file - every rule below needs to out-specify
 * `.bn-block-content[data-content-type=checkListItem] > div > input`.
 */
.bn-container .bn-block-content[data-content-type="checkListItem"] {
    /* Centre the checkbox on the first line of the item instead of stretching it */
    & > div:has(> input[type="checkbox"]) {
        @apply flex h-6 items-center;
    }

    & > div > input[type="checkbox"] {
        @apply h-4 w-4 ml-1 mr-2 my-0 shrink-0 cursor-pointer rounded border-gray-300 text-blue-600;
        @apply dark:border-gray-500;

        &:not(:checked) {
            @apply bg-white dark:bg-gray-700;
        }

        /* The forms plugin paints the tick with `background-color: currentColor` */
        &:checked {
            @apply border-transparent bg-current;
        }

        &:not(:checked):hover:not(:disabled) {
            @apply border-gray-400 dark:border-gray-400;
        }

        /* Read-only documents disable the input - keep it looking like a checkbox instead
           of letting the global `input:disabled` style grey it out. */
        &:disabled {
            @apply cursor-default text-blue-600;
        }
    }

    /* Completed items are already struck through by BlockNote, dim them as well */
    &[data-checked="true"] .bn-inline-content {
        @apply text-gray-400 dark:text-gray-500;
    }
}
@layer components {
    /* Collapsible controller styles */
    [data-controller~="collapsible"] {
        /* Collapsible content visibility */
        > [data-collapsible-target="content"] {
            @apply overflow-hidden transition-[max-height] duration-150 ease-in-out;
        }

        &[data-collapsible-collapsed-value="true"] > [data-collapsible-target="content"] {
            @apply max-h-0;
        }

        &[data-collapsible-collapsed-value="false"] > [data-collapsible-target="content"] {
            @apply max-h-none;
        }
    }

    /* Collapsible trigger states - managed either by the collapsible controller (via its
       classes API) or, in the sidebar tree, by sidebar_tree_controller.ts setting the same
       is-collapsed/is-expanded/is-leaf classes directly on .collapsible-trigger without a
       [data-controller~="collapsible"] ancestor. Keep this un-nested so both paths style it. */
    .collapsible-trigger {
        @apply flex justify-center items-center w-5 shrink-0;

        /* Hide both icons by default until controller sets state */
        .collapsible-icon,
        .collapsible-dot {
            @apply hidden;
        }

        .collapsible-icon {
            @apply transition-transform duration-150 ease-in-out w-full;
        }

        /* Collapsed state - show chevron pointing right */
        &.is-collapsed {
            .collapsible-icon {
                @apply flex rotate-0;
            }
        }

        /* Expanded state - show chevron pointing down */
        &.is-expanded {
            .collapsible-icon {
                @apply flex rotate-90;
            }
        }

        /* Leaf state (no children) - show dot instead */
        &.is-leaf {
            .collapsible-dot {
                @apply block;
            }

            /* Make non-interactive */
            @apply cursor-default pointer-events-none;
        }
    }
}
@layer base {
    .content-container {
        @apply text-black dark:text-white;
        @apply bg-white dark:bg-gray-800;
    }
}

@layer components {
    /* This class is used to match BlockNote's content padding so all editors look similarly, see .bn-editor for current value of the padding */
    .content-editor-padding {
        padding-inline: 54px;
    }

    /* EditableContentTitle component styles */
    .editable-content-title {
        @apply text-base font-semibold truncate;

        &.editable {
            @apply cursor-pointer rounded px-1;
            @apply hover:bg-gray-100 dark:hover:bg-gray-700;
            @apply transition-colors duration-150;
        }

        input {
            @apply text-base font-semibold w-full bg-transparent border-0 p-0 px-1;
            @apply focus:outline-none focus:ring-0 focus:[box-shadow:none];
            min-width: 200px;
            max-width: 400px;
        }
    }

    /* AdvancedTableTitle component styles */
    .advanced-table-title {
        @apply text-xl font-bold min-h-0 max-h-6 p-0;

        &.editable {
            @apply cursor-pointer rounded px-1;
            @apply hover:bg-gray-100 dark:hover:bg-gray-700;
            @apply transition-colors duration-150;
        }

        input {
            @apply text-xl font-bold w-full bg-transparent border-0 p-0;
            @apply focus:outline-none focus:ring-0 focus:[box-shadow:none];
        }
    }

    .rounded-button {
        @apply secondary-button ml-2 text-sm;
        @apply size-8 rounded-full ring-0 hover:ring-1 p-0;
        @apply flex items-center justify-center;
    }

    .document-toolbar-button {
        /*@apply ml-2 text-blue-600 dark:text-blue-500 hover:underline;*/
        /*@apply ml-2 px-2.5 py-1 bg-blue-500 text-white text-sm rounded;*/
        @apply secondary-button ml-2 text-sm;
        @apply size-8 rounded-full p-0;
        @apply flex items-center justify-center;
    }

    /* The large icon beside "No spaces", "No mentions" and the other empty lists. */
    .empty-state-icon {
        @apply size-12 mr-4 shrink-0 text-gray-500 dark:text-gray-300;
    }
}
@layer components {
    .dropdown-container {
        @apply text-sm shadow-lg rounded border overflow-hidden;
        @apply bg-white;
        @apply dark:bg-gray-800;
    }

    .dropdown-container [data-dropdown-target="menuItem"] {
        @apply no-underline block pl-4 py-2 whitespace-nowrap w-full text-left;
        @apply text-gray-900 hover:bg-gray-100 focus:ring-inset focus:ring-1 focus:ring-gray-300;
        @apply dark:text-white dark:hover:bg-gray-500 dark:focus:ring-white;
    }

    .dropdown-container button:disabled[data-dropdown-target="menuItem"],
    .dropdown-container span[disabled="disabled"][data-dropdown-target="menuItem"] {
        @apply text-slate-950/40 bg-white cursor-not-allowed;
        @apply dark:bg-gray-800 dark:text-slate-500;
        @apply focus-visible:outline-none;
    }

    .dropdown-container button, .dropdown-container a {
        @apply focus-visible:outline-none;
    }
}
@layer components {
  .flash-notice-container {
    @apply bg-sky-100 dark:bg-sky-800 border-sky-500 text-sky-900 dark:text-sky-50;
  }
  .flash-notice-icon {
    @apply text-sky-500;
  }
  .flash-notice-button {
    @apply text-sky-500 dark:text-sky-50;
  }

  .flash-alert-container {
    @apply bg-orange-100 dark:bg-orange-800 border-orange-500 text-orange-900 dark:text-orange-50;
  }
  .flash-alert-icon {
    @apply text-orange-500;
  }
  .flash-alert-button {
    @apply text-orange-500 dark:text-orange-50;
  }

  .flash-error-container {
    @apply bg-red-100 dark:bg-red-800 border-red-500 text-red-900 dark:text-red-50;
  }
  .flash-error-icon {
    @apply text-red-500;
  }
  .flash-error-button {
    @apply text-red-500 dark:text-red-50;
  }
}
@layer components {
    .form-errors-summary {
        @apply mt-3 bg-red-100 dark:bg-red-900 border-l-4 border-red-500 dark:border-red-600 mb-4 p-4 text-red-700 dark:text-red-50;
    }

    .form-section {
        @apply dark:bg-gray-800 bg-white max-w-4xl p-6 md:mt-8 md:rounded-md md:shadow-md md:w-2/3 md:mx-auto lg:w-1/2;
    }

    .form-footer {
        @apply flex justify-end mt-6 gap-2;
    }

    .form-submit {
        @apply button;
        @apply text-white bg-gray-700 hover:enabled:bg-gray-600 focus:bg-gray-600;
        @apply dark:bg-gray-200 dark:hover:enabled:bg-gray-100 dark:focus:bg-gray-100 dark:text-gray-900;
        @apply transition-colors duration-200 transform focus:outline-none;
    }

    .form-input {
        @apply block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full;
        @apply dark:bg-gray-700 dark:border-gray-500;
    }

    .form-field {
        @apply my-5;
    }

    .form-header {
        @apply text-lg font-semibold text-gray-700 capitalize dark:text-white;
    }

    .form-legend {
        @apply mt-3 text-gray-700 dark:text-white flex flex-col gap-2;
    }

    .default-form {
        .form-hint {
            @apply mt-3 text-sm text-slate-500 dark:text-gray-300;
        }

        .form-field {
            label {
                @apply block text-sm/6 font-medium;
            }

            em {
                @apply mt-1;
            }

            .field_with_errors {
                label {
                    @apply text-red-700 dark:text-red-500;
                }
            }
        }
    }
}
/*

 */

/* iA Writer Fonts - SIL Open Font License */
/* https://github.com/iaolo/iA-Fonts */

/* iA Writer Quattro - Fully proportional */
@font-face {
  font-family: 'iA Writer Quattro';
  src: url(/assets/ia-writer-quattro/iAWriterQuattroS-Regular-c8d49e112617397e4565fdd3d2c3b725ffacd0dc52ef18254785aa3d6c1ec1ae.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'iA Writer Quattro';
  src: url(/assets/ia-writer-quattro/iAWriterQuattroS-Italic-3e23501bf4389baca37c696fb7485fb43dbfdb6b91d75183e6739c2d5aae801d.woff2) format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'iA Writer Quattro';
  src: url(/assets/ia-writer-quattro/iAWriterQuattroS-Bold-a65d4271cc91ac6d7cc39780dcc35891ce40ce27f6fbb7067a2eff26a67a4571.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'iA Writer Quattro';
  src: url(/assets/ia-writer-quattro/iAWriterQuattroS-BoldItalic-11eba6b87f6a1c3521b30bb6fabdc7b60344ff5130096ef492989f6a6f1413af.woff2) format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@layer components {
    .draft-lozenge {
        @apply uppercase bg-gray-100 group-hover:bg-gray-200 group-hover:active:bg-gray-300 text-gray-800 text-xs font-bold font-medium px-2 py-0 h-4 rounded;
        @apply dark:bg-gray-700 dark:group-hover:bg-gray-600 dark:group-hover:active:bg-gray-500 dark:text-gray-300
    }
}

@layer components {
    .mention {
        @apply border rounded py-0.5 px-1 text-sky-500
    }

    .mention--broken {
        @apply border-red-400 text-red-400 bg-red-50 line-through decoration-red-400/50
    }
}
@layer components {
    .modal-content-container {
        @apply sm:flex sm:items-start;
    }

    .modal-title {
        @apply text-base font-semibold text-gray-900 dark:text-gray-50;
    }

    .modal-subtitle {
        @apply text-sm text-gray-500 dark:text-gray-400;
    }

    .modal-icon-container {
        @apply mx-auto flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-10 sm:w-10;
    }

    /* The icon inside .modal-icon-container, the same size and colour in every dialog. */
    .modal-icon {
        @apply size-6 text-red-600 dark:text-red-200;
    }

    .modal-main-content-container {
        @apply mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left w-full;
    }

    .modal-buttons-container {
        @apply mt-5 sm:mt-4 sm:flex sm:flex-row-reverse;
    }

    .modal-submit-button {
        @apply inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm sm:ml-3 sm:w-auto;
    }

    .modal-cancel-button {
        @apply mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto;
    }
}
.multiselect__container {
    font-family: sans-serif;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-right: 1.75rem;
    padding-left: 0.5rem;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6l6 -6'/></svg>") no-repeat right #ddd;
    background-color: transparent;
    border-radius: 0.25rem;
    appearance: none;
    border: 1px solid rgb(218 218 218);
    outline-offset: 2px;
    outline: transparent solid 2px;
    color: rgb(55 61 63);
    line-height: 1.5;
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    .multiselect__container {
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(164,164,164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6l6 -6'/></svg>") no-repeat right #ddd;
        background-color: transparent;
        border-color: rgb(107 114 128);
    }
}


.multiselect__no-result {
    color: rgb(112 112 112);
    padding: 0.75rem;
    font-size: 0.875rem;
}

.multiselect__addable-button {
    padding: 0.5rem;
    text-decoration-line: underline;
    color: rgb(55 61 63);
    cursor: pointer;
}

.multiselect__addable-button:hover {
    color: rgb(29 115 186);
}

.multiselect__container:focus-within {
    border-color: rgb(44 141 222);
    --tw-shadow:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tw-shadow-colored:  0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.multiselect__container--disabled {
    background-color: rgb(240 240 240);
    cursor: not-allowed;
}

.multiselect__container:hover {
    --tw-shadow:  0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --tw-shadow-colored:  0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.multiselect__hidden {
    display: none;
}

.multiselect__preview {
    width: -webkit-fill-available;
    width: -moz-available;
    width: -webkit-fill-available;
    gap: 0.5rem;
    font-size: 0.875rem;
    display: flex;
    flex-wrap: wrap;
}

.multiselect__pill {
    max-width: fill-available;
    color: rgb(55 61 63);
    font-size: 0.75rem;
    padding-left: 0.5rem;
    background-color: rgb(250 249 244);
    border: 1px solid #f0f0f0;
    border-radius: 0.25rem;
    display: flex;
}

@media (prefers-color-scheme: dark) {
    .multiselect__pill {
        background-color: rgb(17 24 39); /* bg-gray-900 */
        color: rgb(249 250 251); /* text-gray-50 */
        border-color: rgb(75 85 99); /* border-gray-600 */
    }
}

.multiselect__pill-delete {
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    align-items: center;
    display: flex;
    margin-left: 0.25rem;
}

.multiselect__pill-delete:hover {
    background-color: rgb(254 178 178);
}

.multiselect__pill:hover svg{
    fill: rgb(246, 71, 71);
}

@media (prefers-color-scheme: dark) {
    .multiselect__pill svg {
        fill: rgb(229 231 235); /* text-gray-200 */
    }
    .multiselect__pill:hover svg{
        fill: rgb(248 113 113); /* text-red-400 */
    }
    .multiselect__pill-delete:hover {
        background-color: rgb(127 29 29);
    }
}

.multiselect__pill-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.multiselect__input-container {
    display: flex;
}

.multiselect__focused {
    background-color: #f4fbff;
}

@media (prefers-color-scheme: dark) {
    .multiselect__focused {
        background-color: rgb(55 65 81); /* bg-gray-700 */
    }
}

.multiselect__placeholder {
    color: rgb(174 174 174);
    font-style: italic;
    padding-left: 0.25rem;
    opacity: 1;
}

.multiselect__addable {
    text-decoration-line: underline;
    color: rgb(112 112 112);
    text-align: center;
}

.multiselect__addable:hover {
    color: rgb(55 61 63);
}

.multiselect__search {
    width: 100%;
    outline: 2px solid transparent;
    outline-offset: 2px;
    border: transparent;
    color: rgb(55 61 63);
    font-size: 0.875rem;
    padding-left: 0.25rem;
}

@media (prefers-color-scheme: dark) {
    .multiselect__search {
        background-color: rgb(55, 65, 81); /* bg-gray-700 */
        color: rgb(255,255,255); /* text-white */
    }
}

.multiselect__search:focus::placeholder {
    color: rgb(112 112 112);
}

@media (prefers-color-scheme: dark) {
    .multiselect__search:focus::placeholder {
        color: rgb(243 244 246); /* text-gray-100 */
    }
}

.multiselect__search:disabled {
    background-color: rgb(240 240 240);
    cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
    .multiselect__search:disabled {
        background-color: rgb(229 231 235); /* bg-gray-200*/
    }
}

.multiselect__search::placeholder {
    font-style: italic;
    opacity: 1;
    color: rgb(174 174 174);
}

@media (prefers-color-scheme: dark) {
    .multiselect__search::placeholder {
        color: rgb(156 163 175); /* text-gray-400 */
    }
}

.multiselect__list {
    max-height: 400px;
    overflow-y: auto;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.multiselect__list li {
    display: block;
    align-items: center;
    font-size: 0.875rem;
    color: rgb(112 112 112);
    border-top-width: 1;
}


.multiselect__list li:first {
    border-top-width: 0;
}

.multiselect__list li:hover {
    background-color: rgb(244 251 255);
}

@media (prefers-color-scheme: dark) {
    .multiselect__list li:hover {
        background-color: rgb(55 65 81); /* bg-gray-700 */
    }
}

.multiselect__list li label {
    padding: 0.75rem;
    align-items: center;
    cursor: pointer;
    display: flex;
}

.multiselect__list li:first-child {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.multiselect__list li:last-child {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.multiselect__list li input {
    margin-right: 0.75rem;
}

.multiselect__dropdown {
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background-color: rgb(255 255 255);
    border: 1px solid rgb(218 218 218);
    width: 100%;
    border-radius: 0.25rem;
    display: none;
    margin-top: 0.5rem;
    z-index: 50;
    position: absolute;
}

@media (prefers-color-scheme: dark) {
    .multiselect__dropdown {
        background-color: rgb(31 41 55); /* bg-gray-800 */
        border-color: rgb(75 85 99); /* border-gray-600 */
    }
}

.multiselect__dropdown--open {
    display: block;
}
@layer components {
    /*
     * An emoji icon occupies the slot a Tabler icon <i> would otherwise fill.
     * Colour emoji advance about 1.25em wide and their line box is 1.25em tall,
     * ZWJ sequences and flags included. The slot is sized for the emoji so either
     * one sits inside it and the labels in a list line up whichever an object
     * shows. Nothing is clipped: a wider emoji should show as a misalignment, not
     * as half a glyph.
     */
    .object-icon {
        @apply inline-flex shrink-0 items-center justify-center w-[1.25em] h-[1.25em];

        /*
         * The slot is 1.25em tall, taller than the line of a heading whose
         * line-height is under 1.25 (a 36px title on a 40px line). It takes its
         * parent's line-height, so `1lh` is that line, and pulls its margins in by
         * half of what it exceeds the line by. The slot keeps its 1.25em box while
         * its line box in the parent never grows past the surrounding text's.
         */
        line-height: inherit;
        margin-block: min(0px, calc((1lh - 1.25em) / 2));

        /*
         * A Tabler icon draws inside a padded 24-unit grid, so at 1em its ink is
         * about 0.83em against an emoji's 1.1em and it reads a size smaller.
         * Filling the slot brings it to about 1.04em.
         */
        > i {
            @apply size-[1.25em];
        }

        /*
         * Gives the slot a line of text to sit on. An emoji is text, so its slot
         * shares the label's baseline and centres on it; an <i> alone has no
         * baseline, and an inline slot would rest its bottom edge on the label's
         * baseline and ride high. The zero-width space makes both kinds align the
         * same way, in a sentence as well as in a flex row.
         */
        &::before {
            content: "\200b";
        }
    }

    /*
     * Most slots sit in a flex row that already supplies a gap. Inline contexts
     * -- a heading, a mention inside a sentence -- have nothing to lean on, so
     * the slot carries its own spacing there.
     */
    .editable-content-title > .object-icon,
    .mention > .object-icon {
        @apply mr-1;
    }
}
.popover-card {
    @apply absolute max-w-xs z-10 content-container border rounded p-2 text-xs;
}

.popover-reaction-card {
    @apply popover-card;
}

.popover-tooltip-card {
    @apply popover-card;
    @apply border border-gray-300 dark:border-gray-600 shadow bg-gray-200 dark:bg-gray-700 text-slate-800 dark:text-gray-50 whitespace-nowrap;

    code {
        @apply font-mono bg-white dark:bg-gray-500 rounded p-1 px-2;
    }
}
@layer components {
    /* .fundamento-react-select-container {
} */
    .fundamento-react-select-container .fundamento-react-select__control {
        @apply bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500;
    }

    .fundamento-react-select-container .fundamento-react-select__control--is-focused {
        @apply border-gray-500 hover:border-gray-500 dark:border-gray-600 dark:hover:border-gray-500 shadow-none;
    }

    .fundamento-react-select-container .fundamento-react-select__menu {
        @apply bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600;
    }

    .fundamento-react-select-container .fundamento-react-select__option {
        @apply text-gray-600 dark:text-gray-200 bg-white hover:bg-blue-50 dark:bg-gray-800 dark:hover:bg-gray-700;
    }

    .fundamento-react-select-container .fundamento-react-select__multi-value {
        @apply bg-white hover:bg-blue-50 dark:bg-gray-800 dark:hover:bg-gray-700 border;
    }

    .fundamento-react-select-container .fundamento-react-select__multi-value__label {
        @apply text-gray-600 dark:text-gray-200;
    }

    .fundamento-react-select-container .fundamento-react-select__multi-value__remove {
        @apply dark:hover:bg-red-800 dark:hover:text-red-400;
    }

    .fundamento-react-select-container .fundamento-react-select__indicator {
        @apply dark:text-gray-400 dark:hover:text-gray-200;
    }

    .fundamento-react-select-container .fundamento-react-select__indicator-separator {
        @apply bg-gray-400;
    }

    .fundamento-react-select-container .fundamento-react-select__input-container,
    .fundamento-react-select-container .fundamento-react-select__placeholder,
    .fundamento-react-select-container .fundamento-react-select__single-value {
        @apply text-gray-600 dark:text-gray-200;
    }

    .fundamento-react-select-container .fundamento-react-select__input:focus {
        box-shadow: none;
    }
}
@layer components {
    .object-reactions-container {
        @apply flex p-3 gap-1;
    }

    .object-current-reactions-container {
        @apply flex gap-1;

    }

    .reaction-button {
        @apply border rounded-full h-6 px-2;
        @apply content-container;
        @apply whitespace-nowrap;
    }

    .destroy-reaction-button,
    .destroy-reaction-button:disabled {
        @apply reaction-button;
    }

    .destroy-reaction-button:not(:disabled) {
        @apply border-blue-600;
    }

    .create-reaction-button {
        @apply reaction-button;
        @apply px-3;

        @apply border-transparent;
        @apply hover:border-inherit;
    }
}
@layer components {
    .sidebar-bg {
        @apply bg-gray-50 dark:bg-gray-900;
    }

    /* Spacer creates layout space on desktop grid */
    .sidebar-spacer {
        @apply hidden lg:block w-[320px] duration-[350ms] ease-in-out transition-[width];

        @apply group-[.collapsed]/collapser:w-5;
    }

    /* Sidebar container needs relative positioning on desktop for absolute children */
    .sidebar-container {
        @apply lg:relative;
    }

    /*
     * Sidebar: absolute on desktop (within its grid cell), collapsing from its edge.
     *
     * Below lg it is a drawer: fixed over the content, off-canvas and invisible until the
     * container gets `drawer-open` (sidebar_controller.js). Being closed without any class means
     * a page never renders with drawers covering it, whatever the desktop cookie says.
     * `visibility` keeps a closed drawer out of the tab order; transitioning it flips it at the
     * end of the slide-out and the start of the slide-in.
     */
    .sidebar {
        @apply inset-y-0 w-[300px] z-10;
        @apply max-lg:fixed max-lg:z-40 lg:absolute;
        @apply transition-[transform,visibility] duration-[350ms] ease-in-out;
        @apply flex flex-col;
        @apply max-lg:invisible;

        &.left-side {
            @apply left-0;
            @apply max-lg:-translate-x-full lg:group-[.collapsed]/collapser:-translate-x-full;
        }

        &.right-side {
            @apply right-0;
            @apply max-lg:translate-x-full lg:group-[.collapsed]/collapser:translate-x-full;
        }
    }

    .drawer-open .sidebar.left-side,
    .drawer-open .sidebar.right-side {
        @apply max-lg:visible max-lg:translate-x-0;
    }

    /* Dims the content behind an open drawer; tapping it closes the drawer */
    .sidebar-backdrop {
        @apply fixed inset-0 z-30 bg-black/40 lg:hidden;
        @apply opacity-0 pointer-events-none transition-opacity duration-[350ms];
    }

    .drawer-open .sidebar-backdrop {
        @apply opacity-100 pointer-events-auto;
    }

    /* The visible panel with background and content */
    .sidebar-panel {
        @apply relative;
        @apply flex flex-1 flex-col min-h-0;
        @apply sidebar-bg;
        @apply m-5 drop-shadow-lg;

        &.left-side {
            @apply rounded-xl;
        }

        &.right-side {
            @apply rounded-xl;
        }
    }

    /* Invisible clickable trigger area on panel edge. Drawers open from the top bar instead.
       Above the panel's content, whose sticky section headers (z-10) would otherwise paint over
       the half of the button that overlaps the panel, and over its tooltip. */
    .sidebar-trigger-area {
        @apply absolute inset-y-0 w-7 cursor-pointer z-20;
        @apply flex items-center justify-center;
        /* After `flex`, which would otherwise win as the later display rule */
        @apply max-lg:hidden;

        &.left-side {
            @apply -right-7;
        }

        &.right-side {
            @apply -left-7;
        }
    }

    /* When collapsed: show trigger area background and flatten panel's inner edge */
    .collapsed .sidebar-trigger-area {
        @apply sidebar-bg;
    }

    .collapsed .sidebar-trigger-area.left-side {
        @apply rounded-r-xl;
    }

    .collapsed .sidebar-trigger-area.right-side {
        @apply rounded-l-xl;
    }

    /* Desktop only: a drawer keeps its rounded edge whatever the desktop state */
    .collapsed .sidebar-panel.left-side {
        @apply lg:rounded-r-none;
    }

    .collapsed .sidebar-panel.right-side {
        @apply lg:rounded-l-none;
    }

    .collapsed .sidebar-trigger-button.left-side {
        @apply left-5;
    }

    .collapsed .sidebar-trigger-button.right-side {
        @apply -left-5;
    }

    /* Visual button indicator, centered on panel edge */
    .sidebar-trigger-button {
        @apply size-7 rounded-full border;
        @apply bg-white dark:bg-gray-800 content-container;
        @apply flex items-center justify-center;
        @apply z-10 opacity-0 transition-opacity duration-200;

        &.left-side {
            @apply relative -left-3.5;
        }

        &.right-side {
            @apply relative left-3.5;
        }
    }

    .sidebar-trigger-area:hover .sidebar-trigger-button {
        @apply opacity-100;
    }

    /* A touch screen can't hover to find the toggle, so it is always shown there */
    @media (hover: none), (pointer: coarse) {
        .sidebar-trigger-button {
            @apply opacity-100;
        }
    }

    .collapsed .sidebar-trigger-button {
        @apply opacity-100;
    }

    /* Scrollable content area */
    .sidebar-content {
        @apply flex-1 overflow-y-auto overflow-x-hidden scroll-smooth;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: theme('colors.gray.300') transparent;

        @media (prefers-color-scheme: dark) {
            scrollbar-color: theme('colors.gray.700') transparent;
        }
    }
}
@layer components {
    #space-sidebar {
        .space-container {
            @apply my-2 p-2 bg-indigo-700 rounded-md flex justify-between font-semibold text-white;
        }

        .section-header-container {
            @apply flex justify-between items-center text-sm border-b px-1;
            @apply sticky top-0 z-10 sidebar-bg;
        }

        .section-header-title {
            @apply mx-2 py-2 font-bold text-slate-600 uppercase flex flex-grow gap-2 items-center;
            @apply dark:text-gray-400;
        }

        .secondary-button {
            @apply px-3;
        }

        span.secondary-button[disabled="disabled"] {
            @apply disabled-button;
        }

        .section-empty {
            @apply text-slate-400 mx-2 p-2 only:block;
        }

        .section-content-container {
            .section-content-node-container {
                @apply relative w-full scroll-mt-10;
            }

            .content-link-container {
                @apply text-slate-800 dark:text-slate-200 hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700;
            }

            .content-link-container.archived {
                @apply text-slate-400 dark:text-gray-600;
            }

            .content-link-container.selected {
                @apply bg-blue-100 dark:bg-blue-900 hover:bg-blue-200 active:bg-blue-300 dark:hover:bg-blue-800 dark:active:bg-blue-700;
            }

            .content-link {
                @apply flex flex-row items-center flex-grow;
            }

            .document-padding-left {
                padding-left: calc(var(--level) * 16px);
            }

            .content-link-buttons-container {
                @apply absolute gap-1 right-1 top-1 p-1 flex;
            }

            .content-link-button {
                @apply rounded-md size-7 group-hover:bg-gray-200 group-hover:hover:bg-gray-300 group-hover:active:bg-gray-400 inline-flex justify-center items-center;
                @apply group-hover:opacity-100 opacity-0 transition-opacity duration-300;
                @apply dark:group-hover:bg-gray-900 dark:group-hover:hover:bg-gray-800 dark:group-hover:active:bg-gray-600 dark:group-hover:border-gray-600 dark:group-hover:border;

                i {
                    @apply text-gray-950 dark:text-gray-50 opacity-50;
                }
            }

            .content-link-button.selected {
                @apply group-hover:bg-blue-300 group-hover:hover:bg-blue-400 group-hover:active:bg-blue-500;
                @apply dark:group-hover:bg-blue-900 dark:group-hover:border-blue-600 dark:group-hover:hover:bg-blue-800 dark:group-hover:active:bg-blue-600;
            }

            /* A touch screen can't hover to reveal them, and an invisible button still takes the tap.
               So they stay visible, beside the title rather than over it, and look like buttons. */
            @media (hover: none), (pointer: coarse) {
                /* Archived rows hide with the hidden attribute, which a plain display: flex would undo */
                .content-link-container:not([hidden]) {
                    @apply flex items-center;
                }

                .content-link {
                    @apply min-w-0;
                }

                .content-link-buttons-container {
                    @apply static shrink-0 pl-0;
                }

                .content-link-button,
                .content-link-button.selected {
                    @apply opacity-100 secondary-button p-0 size-7;

                    i {
                        @apply opacity-100;
                    }
                }
            }
        }
    }

    /* Draggable controller styles */
    [data-controller~="draggable"] {
        --drop-placeholder-height: 36px;
        position: relative;
        z-index: 1;
        isolation: isolate;

        /* Add small gap between items to allow dropping between siblings */
        & > li {
            @apply my-[1px];
        }

        /* Empty containers during drag - make them valid drop targets */
        &[data-draggable-empty="true"] {
            max-height: none !important;
            height: var(--drop-placeholder-height);
            position: relative;
            top: calc(-1 * var(--drop-placeholder-height));
            margin-bottom: calc(-1 * var(--drop-placeholder-height));
            overflow: visible !important;
        }
    }

    /* Sortable placeholder - visual indicator of drop position */
    /*       placeholderClass: 'sortable-placeholder float-left bg-indigo-600 h-0.5 w-[268px] data-[surround=true]:before:hidden absolute before:absolute before:h-2 before:w-2 before:-top-[3px] before:border-2 before:border-solid before:rounded-full before:bg-white before:border-indigo-600' */
    .sortable-placeholder {
        --level: 0;
        @apply bg-indigo-600 h-0.5 absolute;
        z-index: 50;

        /* Adaptive width based on nesting level */
        margin-left: calc(var(--level) * 16px);
        width: calc(100% - (var(--level) * 16px));

        /* Dot indicator before the line */
        &::before {
            content: "";

            @apply absolute h-2 w-2 -top-[3px] border-2 border-solid rounded-full bg-white border-indigo-600;
        }

        /* When surrounding an empty container - box style wraps parent element */
        &[data-surround="true"] {
            height: var(--drop-placeholder-height);
            top: -2px;
            border: solid 2px rgb(79 70 229);
            border-radius: 8px;
            background-color: inherit;
            margin-left: 0;
            width: 100%;

            &::before {
                display: none;
            }
        }
    }
}
@layer components {
    .table-legend {
        @apply sm:flex sm:items-center p-5;
    }

    .table-legend .table-legend-description {
        @apply sm:flex-auto min-w-0;
    }

    .table-legend .table-legend-description h1 {
        @apply text-base font-semibold leading-6;
    }

    .table-legend .table-legend-description p,
    .table-legend .table-legend-description ol {
        @apply mt-2 text-sm text-gray-700 dark:text-gray-300;
    }

    .table-legend .table-legend-description ol {
        @apply list-decimal list-inside space-y-1;
    }

    .table-legend .table-legend-buttons-container {
        @apply mt-4 sm:ml-16 sm:mt-0 sm:flex-none;
    }

    .table-list {
        @apply w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400;
    }

    .table-list thead {
        @apply text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400;
    }

    .table-list tbody tr {
        @apply bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700;
    }

    .table-list thead tr th {
        @apply px-6 py-3;
    }

    .table-list tbody tr td {
        @apply px-6 py-4 align-top;
    }

    .table-list tbody tr th {
        @apply flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white;
    }

    .table-list tbody tr th > div {
        @apply max-w-xs xl:max-w-md;
    }

    .table-list form.button_to {
        @apply inline-block;

        button {
            text-align: left;
        }
    }
}
@layer components {
    /* These rules are defaults: a utility class on the element is meant to beat them. Matching
       the way the rest of this file used to — `div[data-controller~="tabs"]
       div[data-tabs-target="panel"]` (0,2,2) — outranks any utility (0,1,0), so a `py-0` in the
       markup looks right and silently does nothing. Wrapping the ancestor chain in :where() drops
       that to nothing. Variants therefore win by source order, not by being longer — put an
       override after the rule it overrides.

       Only the ancestor chain goes inside :where(); the target element keeps its own specificity.
       A fully-zeroed rule would lose to Tailwind's preflight, which resets bare `button` (0,0,1)
       with `padding: 0` and `color: inherit`. (0,0,1) clears preflight and still loses to any
       utility class (0,1,0), which is exactly the amount of specificity these rules want.

       Match the controller with ~= rather than =, so styling survives a container that carries a
       second Stimulus controller. */

    :where(div[data-controller~="tabs"]) {
        @apply w-full;
    }

    /* Tabs container */
    :where(div[data-controller~="tabs"] nav[data-tabs-target="list"]) {
        @apply -mb-px flex space-x-8;
    }

    /* Tab */
    :where(div[data-controller~="tabs"] nav[data-tabs-target="list"]) button {
        @apply whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium border-transparent;
        @apply text-gray-500 hover:text-gray-700 hover:border-gray-300;
        @apply dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-500;
    }

    :where(div[data-controller~="tabs"] nav[data-tabs-target="list"]) button:where(.active-tab) {
        @apply text-indigo-500 dark:text-indigo-500 border-indigo-500;
        @apply hover:text-indigo-400 hover:border-indigo-400;
    }

    /* An icon drawn as a CSS mask takes its colour from background-color, and @iconify's utility
       sets that to currentColor. These two rules are the one place in this file that needs to
       outrank a utility, so they are deliberately not wrapped in :where(). */
    nav[data-tabs-target="list"] button .tabs-tab-icon {
        @apply bg-gray-600 dark:bg-gray-200;
    }

    /* One size and one centring for every icon tab bar (documents, tables, spaces), so the bars
       keep the same height: the icon is a block centred in its tab, not an inline box sitting on a
       baseline. */
    nav[data-tabs-target="list"] button:has(.tabs-tab-icon) {
        @apply inline-flex items-center justify-center;
    }

    nav[data-tabs-target="list"] button .tabs-tab-icon {
        @apply block size-5 shrink-0;
    }

    nav[data-tabs-target="list"] button.active-tab .tabs-tab-icon {
        @apply bg-indigo-500 hover:bg-indigo-400;
    }

    /* Tabs that pair an icon with a text label (the dashboard). The icon is not the tab's only
       content, so it must not use .tabs-tab-icon, which turns the button into a centred icon box.
       The button centres the icon on the text line instead, and the icon takes the text's em so it
       reads as large as the Spaces tab's object icon beside it. */
    nav.tabs-with-labels[data-tabs-target="list"] button {
        @apply inline-flex items-center gap-1.5;
    }

    nav.tabs-with-labels[data-tabs-target="list"] button .tabs-label-icon {
        @apply block size-[1.25em] shrink-0;
    }

    /* Tab content container */
    :where(div[data-controller~="tabs"] div[data-tabs-target="panel"]) {
        @apply py-4;
    }

    /* Content sidebar tabs: flex layout for sticky header */
    :where(div.content-sidebar-tabs[data-controller~="tabs"]) {
        @apply flex flex-col h-full;
    }

    :where(div.content-sidebar-tabs[data-controller~="tabs"] nav[data-tabs-target="list"]) {
        @apply space-x-0;
    }

    :where(div.content-sidebar-tabs[data-controller~="tabs"] nav[data-tabs-target="list"]) button {
        @apply py-2 px-3;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */