/*
 * 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.
 *


 */

/* ========== Base Styles ========== */
textarea[readonly], select[readonly], input[readonly] {
    background-color: #f7f8fa;
}

/* ========== Positioning Utilities ========== */
.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.top--1 {
    top: -1rem;
}

/* ========== Status Colors ========== */
.success {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
}

.queued {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
}

.error, .failed {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
}

.running {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
}

/* ========== Icon System ========== */
/* Base icon styles */
.bi-icon::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 1em 1em;
    background-position: center;
}

/* Icon size variations */
.bi-icon.bi-icon-lg::before {
    background-size: 1.25em 1.25em;
    width: 1.25em;
    height: 1.25em;
}

/* Dark mode & colored background modifiers for all icons in left menu */
.dark .left-menu .bi-icon::before {
    filter: brightness(0) invert(1);
}

.dark .bi-account-settings::before{
    filter:brightness(0) invert(1);
}

.dark .bi-sign-out::before {
    filter: brightness(0) invert(1);
}

/* Individual icon definitions - just specify the background image */
.bi-faqs::before { background-image: url(/assets/faqs-01d9e3bbd2d3db57f359f9f94bb2d4152f74ab0f596f6b531acb61cc923fbd9a.png); }
.bi-add-url::before { background-image: url(/assets/additional-url-b1ab25121708096bc886f95a40d624132bb2a944d943857f588d93be97632574.png); }
.bi-add-content::before { background-image: url(/assets/additional-content-733382fd1caa7aaabf1f3c3214a980f2df86d56e988d6f76476cb43106197912.png); }
.bi-task::before { background-image: url(/assets/task-7aff5d50c5b9383a8e44093843074ead3f9837100c7cf2cb460abec7b83fb259.png); }
.bi-search::before { 
    background-image: url(/assets/search-bdbf964357c92d641c2ded3e0acf2547d42cca280f82cff701e714d62cddc4a0.png);
    display: block; /* Special case */
}
.bi-delete::before { background-image: url(/assets/delete-16b09e7f6dd262130fb2c7067016232c05b7873174433214c6cdf6d538d2201e.png); }
.bi-off::before { background-image: url(/assets/off-97c094b50a7bf977fe35259a05cac1e0c5cb37bfbf5b76a5196ea92d39d51a52.png); }
.bi-configuration::before { background-image: url(/assets/configuration-53ad386bbcc40e3f0c6cba45dda6ca36f4190d5d17d24551d7d9c5af2423af7b.png); }
.bi-layout::before { background-image: url(/assets/layout-a898984884228a2e5d4df0f80f7f2a66a03750391d85efbcd163f802fd8db724.png); }
.bi-docs::before { background-image: url(/assets/doc-aed90f28e0bf3fd7c4de2d233a605b9eb0791ee932c5f5c2cedceb623f76729e.png); }
.bi-server-config::before { background-image: url(/assets/server-c7fc4fe9bbe4b8806f4f471bf049fbda10daeed543d26728581c4d9c351ee244.png); }
.bi-crawler::before { background-image: url(/assets/crawler-80323165faeff03c1aec7913b245dac746a916ff08828039ce084cb26400bcfa.png); }
.bi-crawler-log::before { background-image: url(/assets/crawler-log-dac9c79aaabf3c2e8cfcc2faafbd34b48107d2523655b4c68b1c2459cfb5947a.png); }
.bi-ai-summary::before { background-image: url(/assets/ai-summary-65e1331c63df40a88db6cbfb4838c32cc7a2d912290d5c00bbc66aa17c63fe77.png); }
.bi-tasks::before { background-image: url(/assets/tasks-5a10db6617a2e619f2e21ef3deaa79ba1c4511c73e067a2d6ffdea01de403c5a.png); }
.bi-chunks::before { background-image: url(/assets/chunks-a7c9e2266ee26a615890a854e806ebaea887f049cc111cbd5d159c8bce504e25.png); }
.bi-notes::before { background-image: url(/assets/notes-ee76e9d24ea1df056074e0b6dc4b325df5151e09b89e40ea9b334f58292f7d8a.png); }
.bi-status::before { background-image: url(/assets/status-396580e2bf1e2d7fd5239bc86ae294dba0aa3c988f3e80338347c443e50b5256.png); }
.bi-actions::before { background-image: url(/assets/actions-b7dfcd13900d2886a9a286ddd457f5abaecec4895299bd5abac670745c44924c.png); }
.bi-code::before { background-image: url(/assets/code-51712c1770264cdf42b0d10bfbaba1c315f49f3dff96f351e203703538db1072.png); }
.bi-job::before { background-image: url(/assets/job-051dcf6690cdc362740e68acccb8c70ea9d052b18a8328e630ca8b9960a2898a.png); }
.bi-sidekiq::before { background-image: url(/assets/logos/sidekiq-b7dc23908dc7bfebafe55033cf143019943ee27217a0fb6684f4b0e322f14026.png); }
.bi-ui::before { background-image: url(/assets/user-interfaces-31985ca28bf3c9957d1802ef5fd4e092720e7a084aa7c761cf646b471a4fc110.png); }
.bi-users::before { background-image: url(/assets/users-101097e649c343069edb986fc7f46ca1f75807000ec24083aa4d00b52bf67673.png); }
.bi-vsp::before { background-image: url(/assets/vsp-black-b3fa946f0b0933404016e751aa4f741e45cd0883be15381b33ce2698c47e1505.png); }
.bi-vsp-screen::before { background-image: url(/assets/vsp-screen-d37dffd4f59b3621538a63669d4401274ce6a4c671506fea77d78d1e60e03c24.png); }
.bi-checklist::before { background-image: url(/assets/checklist-1910abd39d5532f1354bc91c46fb03728ff290453d6d3b7c3adb3e9ee07f847b.png); }
.bi-applicant::before { background-image: url(/assets/applicant-2100100beeb191fa7838572f8711282503287453c1d3b186cdff26b693424ec7.png); }
.bi-count::before { 
    background-image: url(/assets/count-155a7de7bbd704559b2f0128c9f827c932e94918b26bb5c61e000ce44c55c875.png);
    background-size: 1.7em 1.7em; /* Special case */
}
.bi-cbai::before { background-image: url(/assets/logo-full-icon-c31e568aeb6c95ff047ffecbf32b21cbc3bdece0e2eb8c496035afe6c88ed01b.png); }
.bi-tick::before { background-image: url(/assets/tick-1538fac327d25ce3aa8e23cfcb2d77b802eb4985192c5f6b44fa9ee38f316e6a.png); }
.bi-plus::before { background-image: url(/assets/plus-9c107878a39df28ac2ee456ce60796fa76c7fcd0a03314e7848d79cba2c2ba11.png); }
.bi-menu::before { background-image: url(/assets/menu-26eaf9da4af7cb1c2ac9fd0568a02d69bd8d6ce35c2e01bf27bc15fc16bb05b7.png); }
.bi-x::before { background-image: url(/assets/x-9d968449541fc4beead230e3194e0e0af551f15d5cb8377d390446e5eabac9f2.png); }
.bi-account-settings::before { background-image: url(/assets/account-settings-84bd8b70b81e1675e52d5449b0bad8d86eb77a8167c262e8fbb44eff9d4ed6e3.png); }
.bi-template::before { background-image: url(/assets/template-c366be705463b7c1859f25da77f2e478cc547056fc91f0eaa3942391795825e3.png); }
.bi-anam::before, .bi-avatar::before { background-image: url(/assets/avatar-cccc3c51e7f423c7aa99a12870c3fddeb262f4ab99d9652a9283e4409f3aae92.png); }
.bi-sign-out::before { background-image: url(/assets/sign-out-b48e4f0439f7634c557ecfcb9327b953716c3ffe933fb06594c5c6d79911d2ee.png); }
.bi-eye-slash::before { background-image: url(/assets/eye-slash-3a1607b176c6d9e37a227709180ab35e00bede24b572cb0b685ec85a310d9cf0.png); }
.bi-eye::before { background-image: url(/assets/eye-3fdbfa65805d2e5c58c8a4ec6beaa374b7e206745fddf92a4fb1b37d5d2da7e8.png); }
.bi-lock::before { background-image: url(/assets/lock-e11d15d42510389b11b827292eee998a1317b2a48eeae48145d1404c2631f63f.png); }
.bi-google-logo::before { background-image: url(/assets/google-logo-eadcb4f2e7ee4cdd2de4680e83d076d7a472fe778bb8593c86db03e30eb639b4.png); }
.bi-edit::before { background-image: url(/assets/edit-accf812bed160c09f432c77b8eabafb53808a1be282a38ac5dbe086d1a699ad6.png); }

/* Special icon behaviors */
.bi-delete-red::before {
    filter: invert(27%) sepia(100%) saturate(2878%) hue-rotate(346deg) brightness(97%) contrast(97%);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.bi-delete-red:hover::before {
    opacity: 1;
}

.group:hover .bi-account-settings::before {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(200deg) brightness(118%) contrast(119%);
}

.dark .group:hover .bi-account-settings::before {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(200deg) brightness(118%) contrast(119%);
}

.group:hover .bi-sign-out::before {
    filter: invert(27%) sepia(100%) saturate(2878%) hue-rotate(346deg) brightness(97%) contrast(97%);
}

.dark .group:hover .bi-sign-out::before {
    filter: invert(27%) sepia(100%) saturate(2878%) hue-rotate(346deg) brightness(97%) contrast(97%);
}

/* ========== LLM AI Icons ========== */
.bi-llm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bi-llm::before {
    background-image: url(/assets/logos/generic-llm-e296640dda9caa2ffa8d0d2df1e13b50607d8a2747facd2e7f9e581060e5f440.png);
    min-width: 1.6em;
    height: 1.6em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.bi-mistral::before { background-image: url(/assets/logos/mistral-df670831a9345c5bd9570fa3759f395498c559b6ff7fc6d0cb5949530ba395b5.png); }
.bi-anthropic::before { background-image: url(/assets/logos/anthropic-ffde3284c011bac192e2459aedda8e5747e087c5cd8395041e260bef6186a9b5.png); }
.bi-openai::before { background-image: url(/assets/logos/openai-18959cf2c7383761026fa4b6d01a20828a95015ffbaca5a01c15abe3d5cf7584.png); }
.bi-deepseek::before { background-image: url(/assets/logos/deepseek-5a4b37cfad659e3726cecfa9ead8aa2802171fe06434690a7c91662d5adebf7d.png); }
.bi-minimax::before { background-image: url(/assets/logos/minimax-9c9e600674279ab54836649015f8aa4e79b615a5cd57fe7832665ebdd00b850f.png); }
.bi-google::before { background-image: url(/assets/logos/google-4d983215a7b164d1fec1b12fe65110175c2795ced022b0920320415192d04296.png); }
.bi-xai::before { background-image: url(/assets/logos/xai-f83b67ea1206abe8dd9114c32e913896c51a14f8a24c74e3200e55d351ae92cb.png); }
.bi-meta::before { background-image: url(/assets/logos/meta-531daf6fab37b8bc5833ab9bc570a077531c6e9a186e944fb29f17236963b8e3.png); }

/* ========== Layout Components ========== */
.main-transition {
    transition: margin-left 0.3s ease;
    margin-left: 16rem;
}

.collapsed-main {
    margin-left: 0;
}

/* ========== UI Components ========== */
/* Buttons */
.submit-button {
    background-color: #dc2626;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    width: 100%;
    cursor: pointer;
}
  
.submit-button:hover {
    background-color: #9f1239;
}

.submit-button:focus {
    box-shadow: 0 0 0 3px rgba(0, 105, 255, 0.5);
}

/* Menu styles */
.cbai-sub-menu {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem;
    color: #6b7280;
    transition-property: all;
    transition-duration: 75ms;
    border-radius: 0.5rem;
    padding-left: 1.5rem;
}

.cbai-sub-menu:hover {
    background-color: rgb(219 234 254);
}

.dark .cbai-sub-menu {
    color: #d1d5db;
}

.dark .cbai-sub-menu:hover,
.dark .cbai-sub-menu.active {
    background-color: rgb(64, 77, 92);
}

.cbai-sub-menu.active {
    background-color: rgb(219 234 254);
}

/* ========== Table Styling ========== */
th[data-sortable-table-target="column"] {
    transition-property: background-color;
    transition-duration: 200ms;
}

th[data-sortable-table-target="column"]:hover {
    background-color: rgb(243 244 246);
}

th[data-sortable-table-target="column"] .flex {
    display: flex;
    justify-content: space-between;
}

.td-relative {
    position: relative;
}

.cell-content-with-icon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cell-text-content {
    display: flex;
    flex-direction: column;
}

.bi-icon.top-right {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* ========== Status Pills ========== */
.status-pill {
    border: 1px solid white;
    padding: 0 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.status-pill:hover {
    opacity: 0.8;
}

.status-unknown {
    background-color: rgb(243 244 246);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    color: rgb(31 41 55);
}

.status-demo {
    background-color: rgb(219 234 254);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    color: rgb(30 64 175);
}

.status-testing {
    background-color: rgb(254 249 195);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    color: rgb(161 98 7);
}

.status-deploying {
    background-color: rgb(243 232 255);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    color: rgb(107 33 168);
}

.status-gifted {
    background-color: rgb(252 231 243);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    color: rgb(157 23 77);
}

.status-trial {
    background-color: rgb(255 237 213);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    color: rgb(154 52 18);
}

.status-production {
    background-color: rgb(220 252 231);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    color: rgb(22 101 52);
}

/* ========== Form Elements ========== */
/* Fix for password field width issues */
#password-field, 
#confirmation-password-field {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

.relative.flex.items-center[data-controller="user-password"] {
    width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
}

/* Ensure input fields don't collapse on error state */
.field_with_errors input[type="password"] {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* Rails wraps inputs with errors in .field_with_errors divs */
.field_with_errors {
    display: inline-block !important;
    width: 100% !important;
}

/* ========== Miscellaneous ========== */
.line-height-normal {
    line-height: normal;
}

.margin-top-and-bottom-2px {
    margin-top: 2px;
    margin-bottom: 2px;
}

.invert {
    filter: invert(1);
}

.pagy {
    display: flex;
    font-family: sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(29 78 216);
    padding: 1rem;
}
.pagy > :not([hidden]) ~ :not([hidden]) {
    --space-reverse: 0;
    margin-right: calc(0.5rem * var(--space-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--space-reverse)));
}
.pagy a:not(.gap) {
    display: block;
    text-decoration: none;
    border-radius: 50%;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    padding: 0.25rem 0.75rem;
    color: rgb(59 130 246);
}
.pagy a:not(.gap):hover {
    background-color: rgb(29 78 216);
    color: white;
    border-radius: 50%;
}
.pagy a:not(.gap):not([href]) { /* disabled links */
    cursor: default;
    background-color: #f3f4f6;
    color: gray;
}
.pagy a:not(.gap).current {
    background-color: rgb(29 78 216);
    color: white;
    border-radius: 50%;
}
.pagy label {
    white-space: nowrap;
    display: inline-block;
    border-radius: 0.5rem;
    padding: 0.125rem 0.75rem;
}
.pagy label input {
    line-height: 1.5rem;
    border-radius: 0.375rem;
    border-style: none;
}

/* ========== Custom Flex Utility Cards for actiond ========== */
.custom-flex-1 {
    flex: 1 1 86px;
    max-width: 28%
}