@import "tailwindcss";

.active {
    background-color: #2a3b56;
    color: #f78a44;
}
.bg-gradient-dark {
    background: rgb(3, 14, 25);
    background: -moz-linear-gradient(90deg, rgba(3, 14, 25, 1) 0%, rgba(29, 67, 106, 1) 63%, rgba(34, 74, 114, 1) 100%);
    background: -webkit-linear-gradient(
        90deg,
        rgba(3, 14, 25, 1) 0%,
        rgba(29, 67, 106, 1) 63%,
        rgba(34, 74, 114, 1) 100%
    );
    background: linear-gradient(90deg, rgba(3, 14, 25, 1) 0%, rgba(29, 67, 106, 1) 63%, rgba(34, 74, 114, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#030e19", endColorstr="#224a72", GradientType=1);
    color: #ffffff;
}

/* Custom tooltip styles */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 280px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -140px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 100;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    z-index: 100;
    opacity: 1;
}

/* Responsive table styles */
@media (max-width: 768px) {
    .responsive-table thead {
        display: none;
    }

    .responsive-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
    }

    .responsive-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .responsive-table tbody td:last-child {
        border-bottom: none;
    }

    .responsive-table tbody td::before {
        content: attr(data-label);
        font-weight: 500;
        text-align: left;
        color: #4b5563;
    }
}

/* Collapsible animation */
.workflow-content {
    max-height: 2000px;
    transition: max-height 0.5s ease-in-out;
}

.workflow-content.collapsed {
    overflow: hidden;
    max-height: 0;
}

.rotate-icon {
    transition: transform 0.3s ease;
}

.rotate-icon.collapsed {
    transform: rotate(-90deg);
}

/* Search highlight */
.highlight {
    background-color: #fefce8;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 500;
}
#uploaded_image_preview {
    width: 100%;
    height: 100%;
    background-position: center center;
    border-radius: 10px;
    &:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }
}
.icon-xl {
    font-size: 1.5rem;
}

button {
    cursor: pointer;
}
button:disabled {
    cursor: not-allowed;
}

.thumbnail-active {
    border: 3px solid #f59e0b !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.8);
    transform: scale(1.05);
}

.thumbnail-item {
    transition: all 0.3s ease;
}

.thumbnail-item:hover {
    border-color: #f59e0b;
    transform: scale(1.02);
}

.thumbnail-slider::-webkit-scrollbar {
    width: 6px;
}

.thumbnail-slider::-webkit-scrollbar-track {
    background: #374151;
}

.thumbnail-slider::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 3px;
}

.thumbnail-slider::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

@theme {
    --color-navy: #0e2741;
    --color-navy-light: #475569;
    --color-navy-dark: #10263d;
    --color-navy-500: #1a3752;
    --color-orange: #f78a44;
    --color-orange-light: #ffb88b;
    --color-orange-dark: #d66c1f;
    --color-green: #59ae78;
    --color-green-light: #bbf7d0;
    --color-green-dark: #16a34a;
    --color-blue: #438bca;
    --color-blue-light: #9dbfdd;
    --color-blue-dark: #1284e8;
    --color-purple: #a855f7;
    --color-purple-light: #e9d5ff;
    --color-purple-dark: #9333ea;
    --color-red: #ef4444;
    --color-red-light: #fecaca;
    --color-red-dark: #dc2626;
    --color-yellow: #f7d11d;
    --color-yellow-light: #fde68a;
    --color-yellow-dark: #d1ad01;
}

@layer components {
    /* Basic Buttons */
    .btn {
        @apply cursor-pointer px-3 py-2 inline-flex items-center gap-x-2 text-lg font-normal rounded-lg;
    }

    /* Severities */
    .btn-primary {
        @apply bg-orange hover:bg-orange-dark;
    }

    .btn-secondary {
        @apply bg-navy hover:bg-navy-dark;
    }

    .btn-success {
        @apply bg-green hover:bg-green-dark;
    }

    .btn-info {
        @apply bg-blue hover:bg-blue-dark;
    }

    .btn-warning {
        @apply bg-yellow hover:bg-yellow-dark;
    }

    .btn-help {
        @apply bg-purple hover:bg-purple-dark;
    }

    .btn-danger {
        @apply bg-red hover:bg-red-dark;
    }

    /* Rounded Buttons */
    .btn-rounded {
        @apply rounded-full;
    }

    /* Icon Buttons */
    .btn-icon {
        @apply p-2 rounded-lg bg-transparent;
    }

    /* Raised Buttons */
    .btn-raised {
        @apply shadow-2xl hover:shadow-lg;
    }

    /* Text Buttons */
    .btn-text {
        @apply bg-transparent text-white;
    }

    .btn-text-primary {
        @apply text-orange hover:bg-orange;
    }

    .btn-text-secondary {
        @apply text-navy hover:bg-navy;
    }

    .btn-text-success {
        @apply text-green hover:bg-green;
    }

    .btn-text-info {
        @apply text-blue hover:bg-blue;
    }

    .btn-text-warning {
        @apply text-yellow hover:bg-yellow;
    }

    .btn-text-help {
        @apply text-purple hover:bg-purple;
    }

    .btn-text-danger {
        @apply text-red hover:bg-red;
    }

    /* Outlined Buttons */
    .btn-outlined {
        @apply bg-transparent border-2 hover:text-white;
    }

    .btn-outlined-primary {
        @apply border border-orange text-orange hover:bg-orange hover:text-white;
    }

    .btn-outlined-secondary {
        @apply border-navy text-navy hover:bg-navy;
    }

    .btn-outlined-success {
        @apply border-green text-green hover:bg-green;
    }

    .btn-outlined-info {
        @apply border-blue text-blue hover:bg-blue;
    }

    .btn-outlined-warning {
        @apply border-yellow text-yellow hover:bg-yellow;
    }

    .btn-outlined-help {
        @apply border-purple text-purple hover:bg-purple;
    }

    .btn-outlined-danger {
        @apply border-red text-red hover:bg-red;
    }

    /* Button Set */
    .btn-set {
        @apply inline-flex rounded-lg overflow-hidden;
    }

    .btn-set .btn {
        @apply rounded-none border-r last:border-r-0;
    }

    .success {
        @apply bg-green-100 border-s-4 border-green-500 p-2;
    }

    .error {
        @apply bg-red-100 border-s-4 border-red-500 p-2;
    }

    .info {
        @apply bg-orange-100 border-s-4 border-orange-500 p-2;
    }

    .warning {
        @apply bg-yellow-100 border-s-4 border-yellow-500 p-2;
    }
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 2px;
    height: 2px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.active-button {
    @apply bg-orange-400 text-white;
}

drag-over {
    background-color: #f3f4f6;
    border-color: #3b82f6;
}
.annotation-overlay {
    position: absolute;
    background: rgba(12, 12, 12, 0.4);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    user-select: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.annotation-overlay:hover {
    background: rgba(12, 12, 12, 1);
}

.annotation-overlay.pinned {
    border-color: #dc2626;
}

.annotation-overlay.drawing-mode {
    border-color: #ffb88b;
    background: rgba(16, 185, 129, 0.1);
}

.arrow-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.drawing-cursor {
    cursor: crosshair !important;
}

.drawing-cursor * {
    cursor: crosshair !important;
}

.pin-btn.drawing {
    background-color: #ffb88b;
    color: white;
    border-radius: 50%;
}

.arrow-line {
    stroke: #ffb88b;
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 4, 6;
    opacity: 0.7;
    marker-end: url(#arrowhead-preview);
}

.preview-arrow {
    stroke: #ffb88b;
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 4, 6;
    opacity: 0.7;
    marker-end: url(#arrowhead-preview);
}

.dragging {
    z-index: 1000;
    opacity: 0.5;
    transform: rotate(5deg);
}

/* Custom slider styling */
.custom-range {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    outline: none;
    margin: 10px 0;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #f4a261;
    border-radius: 50%;
    cursor: pointer;
}

.custom-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #f4a261;
    border-radius: 50%;
    cursor: pointer;
}

@font-face {
    font-family: "clarius";
    src: url("fonts/clarius.eot?6hbvg2");
    src:
        url("fonts/clarius.eot?6hbvg2#iefix") format("embedded-opentype"),
        url("fonts/clarius.ttf?6hbvg2") format("truetype"),
        url("fonts/clarius.woff?6hbvg2") format("woff"),
        url("fonts/clarius.svg?6hbvg2#clarius") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="i-"],
[class*=" i-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "clarius" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.i-check:before {
    content: "\e93b";
}
.i-question-circle:before {
    content: "\e93c";
}
.i-question:before {
    content: "\e93d";
}
.i-pencil:before {
    content: "\e93e";
}
.i-plus:before {
    content: "\e93f";
}
.i-arrow-left:before {
    content: "\e936";
}
.i-arrow-right:before {
    content: "\e937";
}
.i-times-circle:before {
    content: "\e938";
}
.i-times:before {
    content: "\e939";
}
.i-trash:before {
    content: "\e93a";
}
.i-calendar-minus:before {
    content: "\e926";
}
.i-calendar-plus:before {
    content: "\e927";
}
.i-calendar:before {
    content: "\e928";
}
.i-clock:before {
    content: "\e929";
}
.i-download:before {
    content: "\e92a";
}
.i-elipsis-h:before {
    content: "\e92b";
}
.i-elipsis-v:before {
    content: "\e92c";
}
.i-envelope:before {
    content: "\e92d";
}
.i-exclamation-triangle:before {
    content: "\e92e";
}
.i-eye-slash:before {
    content: "\e92f";
}
.i-eye:before {
    content: "\e930";
}
.i-key:before {
    content: "\e931";
}
.i-lock-open:before {
    content: "\e932";
}
.i-lock:before {
    content: "\e933";
}
.i-map-marker:before {
    content: "\e934";
}
.i-unlock:before {
    content: "\e935";
}
.i-folder-open:before {
    content: "\e923";
}
.i-image:before {
    content: "\e924";
}
.i-images:before {
    content: "\e925";
}
.i-angle-double-left:before {
    content: "\e918";
}
.i-angle-double-right:before {
    content: "\e919";
}
.i-angle-left:before {
    content: "\e91a";
}
.i-angle-right:before {
    content: "\e91b";
}
.i-delete-left:before {
    content: "\e91c";
}
.i-file-excel:before {
    content: "\e91d";
}
.i-file-pdf:before {
    content: "\e91e";
}
.i-filter-slash:before {
    content: "\e91f";
}
.i-filter:before {
    content: "\e920";
}
.i-folder:before {
    content: "\e921";
}
.i-upload:before {
    content: "\e922";
}
.i-file-report:before {
    content: "\e916";
}
.i-preset:before {
    content: "\e917";
}
.i-bars:before {
    content: "\e915";
}
.i-chevron-down:before {
    content: "\e913";
}
.i-chevron-up:before {
    content: "\e914";
}
.i-angle-up:before {
    content: "\e912";
}
.i-angle-down:before {
    content: "\e900";
}
.i-file:before {
    content: "\e901";
}
.i-home:before {
    content: "\e902";
}
.i-hospital:before {
    content: "\e903";
}
.i-phone:before {
    content: "\e904";
}
.i-power-off:before {
    content: "\e905";
}
.i-scanners:before {
    content: "\e906";
}
.i-search:before {
    content: "\e907";
}
.i-settings:before {
    content: "\e908";
}
.i-share:before {
    content: "\e909";
}
.i-th-large:before {
    content: "\e90a";
}
.i-ultrasound:before {
    content: "\e90b";
}
.i-user:before {
    content: "\e90c";
}
.i-users:before {
    content: "\e90d";
}
.i-video:before {
    content: "\e90e";
}
.i-wrench:before {
    content: "\e90f";
}
.i-youtube:before {
    content: "\e910";
}
.i-align-center:before {
    content: "\e911";
}

/* Sidebar collapse styles */
.sidebar {
    transition:
        width 0.3s ease,
        padding 0.3s ease;
    overflow: visible;
}

/* Collapsed sidebar styles - applied via .collapsed class (JS) or html.sidebar-is-collapsed (pre-render) */
.sidebar.collapsed,
html.sidebar-is-collapsed .sidebar {
    width: 5rem;
    padding: 1.5rem 0.75rem;
}

.sidebar.collapsed .sidebar-label,
html.sidebar-is-collapsed .sidebar .sidebar-label {
    display: none;
}

.sidebar.collapsed .sidebar-logo,
html.sidebar-is-collapsed .sidebar .sidebar-logo {
    display: none;
}

.sidebar.collapsed .sidebar-logo-icon,
html.sidebar-is-collapsed .sidebar .sidebar-logo-icon {
    display: block;
}

.sidebar.collapsed .sidebar-collapse-icon,
html.sidebar-is-collapsed .sidebar .sidebar-collapse-icon {
    display: none;
}

.sidebar.collapsed .sidebar-expand-icon,
html.sidebar-is-collapsed .sidebar .sidebar-expand-icon {
    display: block;
}

.sidebar.collapsed nav a,
.sidebar.collapsed footer a,
.sidebar.collapsed footer button,
html.sidebar-is-collapsed .sidebar nav a,
html.sidebar-is-collapsed .sidebar footer a,
html.sidebar-is-collapsed .sidebar footer button {
    justify-content: center;
    position: relative;
}

.sidebar.collapsed nav a i,
.sidebar.collapsed footer a i,
.sidebar.collapsed footer button .w-10,
html.sidebar-is-collapsed .sidebar nav a i,
html.sidebar-is-collapsed .sidebar footer a i,
html.sidebar-is-collapsed .sidebar footer button .w-10 {
    margin: 0;
}

/* Toggle button is absolutely positioned, no centering needed */

.sidebar.collapsed header,
html.sidebar-is-collapsed .sidebar header {
    justify-content: center;
}

/* Tooltips for collapsed sidebar */
.sidebar.collapsed nav a::after,
.sidebar.collapsed footer a::after,
html.sidebar-is-collapsed .sidebar nav a::after,
html.sidebar-is-collapsed .sidebar footer a::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #1e293b;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s,
        visibility 0.2s;
    margin-left: 0.5rem;
    z-index: 100;
}

.sidebar.collapsed nav a:hover::after,
.sidebar.collapsed footer a:hover::after,
html.sidebar-is-collapsed .sidebar nav a:hover::after,
html.sidebar-is-collapsed .sidebar footer a:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Hide dropdown in collapsed mode for institution list */
.sidebar.collapsed .hs-dropdown,
html.sidebar-is-collapsed .sidebar .hs-dropdown {
    justify-content: center;
}

/* Sidebar section toggle */
.sidebar-section-toggle {
    cursor: pointer;
    background: none;
    border: none;
}

.sidebar-section.section-collapsed .sidebar-section-chevron {
    transform: rotate(-90deg);
}

.sidebar-section.section-collapsed .sidebar-section-items {
    display: none;
}

/* Pre-render section collapsed state (before JS takes over) */
html.sidebar-section-0-collapsed .sidebar-section:nth-of-type(1) .sidebar-section-chevron {
    transform: rotate(-90deg);
}
html.sidebar-section-0-collapsed .sidebar-section:nth-of-type(1) .sidebar-section-items {
    display: none;
}
html.sidebar-section-1-collapsed .sidebar-section:nth-of-type(2) .sidebar-section-chevron {
    transform: rotate(-90deg);
}
html.sidebar-section-1-collapsed .sidebar-section:nth-of-type(2) .sidebar-section-items {
    display: none;
}

/* Collapsed sidebar: hide section label, center chevron */
.sidebar.collapsed .sidebar-section-toggle,
html.sidebar-is-collapsed .sidebar .sidebar-section-toggle {
    justify-content: center;
}

.sidebar.collapsed .sidebar-section,
html.sidebar-is-collapsed .sidebar .sidebar-section {
    padding-top: 0.75rem;
}

/* Mobile sidebar styles */
@media (max-width: 767px) {
    .sidebar.mobile-open {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        transform: translateX(0);
    }
}