/* Corner Ribbon Styles */
.corner-ribbon {
    position: relative;
    overflow: hidden;
}

.corner-ribbon::before {
    content: attr(data-ribbon-text);
    position: absolute;
    top: 20px;
    right: -40px;
    z-index: 10;
    width: 150px;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, var(--ribbon-color-start, var(--mantine-color-blue-6)) 0%, var(--ribbon-color-end, var(--mantine-color-blue-7)) 100%);
    transform: rotate(45deg);
    transform-origin: center center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

/* Ribbon Color Variants using Mantine color variables */
.corner-ribbon-blue::before {
    /* Tone down saturation by using indigo scale for a calmer accent */
    --ribbon-color-start: var(--mantine-color-indigo-6);
    --ribbon-color-end: var(--mantine-color-indigo-7);
}

.corner-ribbon-green::before {
    --ribbon-color-start: var(--mantine-color-green-6);
    --ribbon-color-end: var(--mantine-color-green-7);
}

.corner-ribbon-red::before {
    --ribbon-color-start: var(--mantine-color-red-6);
    --ribbon-color-end: var(--mantine-color-red-7);
}

.corner-ribbon-orange::before {
    --ribbon-color-start: var(--mantine-color-orange-6);
    --ribbon-color-end: var(--mantine-color-orange-7);
}

.corner-ribbon-yellow::before {
    --ribbon-color-start: var(--mantine-color-yellow-6);
    --ribbon-color-end: var(--mantine-color-yellow-7);
}

.corner-ribbon-purple::before {
    --ribbon-color-start: var(--mantine-color-indigo-6);
    --ribbon-color-end: var(--mantine-color-indigo-7);
}

.corner-ribbon-violet::before {
    --ribbon-color-start: var(--mantine-color-indigo-6);
    --ribbon-color-end: var(--mantine-color-indigo-7);
}

.corner-ribbon-gray::before {
    --ribbon-color-start: var(--mantine-color-gray-6);
    --ribbon-color-end: var(--mantine-color-gray-7);
}

.corner-ribbon-dark::before {
    --ribbon-color-start: var(--mantine-color-dark-6);
    --ribbon-color-end: var(--mantine-color-dark-7);
}

/* Project Card Title Styles */
.project-card-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Project Card Description Styles */
.project-card-description {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Project Card Button Overrides */
/* Primary action buttons (Open, Open an example) */
.btn-primary {
    /* Primary CTA aligns with logo green */
    background-color: var(--mantine-color-green-6) !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: var(--mantine-color-green-7) !important;
}

/* Primary accent buttons - purple/indigo like demo ribbon */
.btn-primary-accent {
    background-color: var(--mantine-color-indigo-6) !important;
    color: white !important;
}

.btn-primary-accent:hover {
    background-color: var(--mantine-color-indigo-7) !important;
}

/* Tag badges */
.badge-tag {
    background-color: var(--mantine-color-indigo-0) !important;
    color: var(--mantine-color-indigo-7) !important;
    border-color: var(--mantine-color-indigo-2) !important;
}

/* Secondary action buttons */
.btn-archive {
    color: var(--mantine-color-gray-8) !important;
    background-color: var(--mantine-color-gray-1) !important;
}

.btn-archive:hover {
    background-color: var(--mantine-color-gray-2) !important;
}

.btn-delete {
    color: var(--mantine-color-red-7) !important;
    background-color: var(--mantine-color-red-0) !important;
}

.btn-delete:hover {
    background-color: var(--mantine-color-red-1) !important;
}

/* Bootstrap/Placeholder View Styles */
.boot-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--mantine-radius-lg);
}

.boot-hero-card {
    height: 600px;
    display: flex;
    flex-direction: column;
    width: 350px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.boot-upload-card {
    height: 600px;
    display: flex;
    flex-direction: column;
    width: 350px;
    box-sizing: border-box;
    /* Softer, neutral background with a hint of indigo */
    background: linear-gradient(135deg, #f9fafb 0%, #f6f8fb 100%);
}

.boot-card-stack {
    height: 100%;
}

.boot-space-flex {
    flex: 1;
}

.boot-upload-link {
    color: var(--mantine-color-indigo-7);
    font-size: 32px;
    font-weight: 600;
    text-decoration: none;
    margin: 20px 0 10px 0;
}

.boot-upload-link:hover {
    color: var(--mantine-color-indigo-8);
}

.boot-upload-text {
    font-size: 22px;
    font-weight: 600;
    color: var(--mantine-color-dark-3);
    margin: 20px 20px 0px 20px;
}

.boot-upload-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.boot-upload-area {
    cursor: pointer;
    user-select: none;
    height: 100%;
    width: 100%;
}

.boot-upload-container {
    border: 2px dashed var(--mantine-color-indigo-4);
    border-radius: 12px;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.8) 0%, rgba(238, 242, 255, 0.5) 100%);
    box-shadow: 0 1px 3px rgba(76, 81, 191, 0.10), 
                0 1px 2px rgba(0, 0, 0, 0.06),
                inset 0 1px 2px rgba(76, 81, 191, 0.10);
    transition: all 0.3s ease;
}

.boot-upload-container:hover {
    border-color: var(--mantine-color-indigo-5);
    background: linear-gradient(135deg, rgba(226, 232, 240, 0.9) 0%, rgba(224, 231, 255, 0.7) 100%);
    box-shadow: 0 4px 12px rgba(76, 81, 191, 0.15), 
                0 2px 6px rgba(0, 0, 0, 0.1),
                inset 0 1px 3px rgba(76, 81, 191, 0.12);
    transform: translateY(-2px);
}

.boot-divider-container {
    width: 80%;
    margin: 0 auto;
}

.boot-signin-link {
    text-decoration: none;
}

.boot-fallback-card {
    height: 600px;
    display: flex;
    flex-direction: column;
    width: 350px;
    box-sizing: border-box;
}

.boot-fallback-stack {
    height: 100%;
}

/* Footer links - subtle by default, clear on hover/focus */
.footer-link {
    color: var(--mantine-color-gray-6);
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color 120ms ease, text-decoration-color 120ms ease;
}

.footer-link:hover {
    color: var(--mantine-color-dark-6);
    text-decoration: underline;
    text-decoration-color: var(--mantine-color-indigo-5);
}

.footer-link:focus-visible {
    outline: 2px solid var(--mantine-color-indigo-5);
    outline-offset: 2px;
    border-radius: 4px;
    text-decoration: underline;
}

.footer-link:visited {
    color: var(--mantine-color-gray-6);
}

/* Model Select Dropdown Styles */
.model-select {
    background-color: transparent !important;
    font-size: 11px !important;
    border-radius: 6px !important;
}

.model-select input {
    background-color: transparent !important;
    font-size: 11px !important;
    border-radius: 6px !important;
}

.model-select .mantine-Select-input {
    background-color: transparent !important;
    font-size: 11px !important;
    border-radius: 6px !important;
}

/* Responsive header title - fixed width on small screens */
.appshell-header-title-responsive {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
}

@media (min-width: 768px) {
    .appshell-header-title-responsive {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
    }
}

#appshell-header-title:empty {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
}

/* Sign-in button styles */
.auth-login-button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    border: 1px solid #8c8c8c !important;
    height: calc(41px * var(--mantine-scale, 1)) !important;
}

.auth-login-icon {
    width: calc(21px * var(--mantine-scale, 1)) !important;
    height: calc(21px * var(--mantine-scale, 1)) !important;
}

.auth-login-text {
    font-weight: 600 !important;
    font-size: calc(15px * var(--mantine-scale, 1)) !important;
    color: #5e5e5e !important;
}

.auth-login-group {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Add spacing and prevent shrinking for the user menu container */
#appshell-header-usermenu {
    padding-right: 16px !important;
    flex-shrink: 0 !important;
    min-width: fit-content !important;
}

.auth-login-button *,
.auth-login-button .mantine-Button-root,
.auth-login-button .mantine-Button-inner,
.auth-login-button .mantine-Group-root,
.auth-login-button .mantine-Text-root {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Fix breadcrumb separator alignment */
.mantine-Breadcrumbs-separator {
    vertical-align: middle !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Upload button in header */
.header-upload-group {
    cursor: pointer;
    user-select: none;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-upload-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}