/* Custom styles for T-Shirt Design Tool */

/* Import Google Fonts for canvas text rendering */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Oswald:wght@400;700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Dancing+Script:wght@400;700&family=Pacifico&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Bebas+Neue&family=Anton&family=Lobster&family=Great+Vibes&family=Righteous&display=swap');

/* Font face declarations for Microsoft fonts (fallbacks) */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #2c3e50 !important; /* Slightly lighter blue background */
}

/* Cloud9 Logo Positioning - Below Submit Button */
.cloud9-logo-container {
    position: relative;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.cloud9-logo {
    position: absolute; /* Absolute positioning relative to parent container */
    height: 8.86875rem; /* 141.9px = 14% smaller (165px * 0.86) */
    max-width: 22.171875rem; /* 354.75px = 14% smaller (412.5px * 0.86) */
    object-fit: contain;
    z-index: 10;
    cursor: default; /* Remove move cursor */
    pointer-events: none; /* Disable all pointer events to prevent interaction */
    transform-origin: center;
    /* Initial positioning - will be updated by JavaScript */
    right: 1.25rem; /* 20px = 1.25rem */
    top: 50vh;
}

/* Responsive sizing for different screen sizes using rem units (14% smaller than 65% larger) */
@media (max-width: 1400px) {
    .cloud9-logo {
        height: 7.98rem; /* 127.71px = 14% smaller (148.5px * 0.86) */
        max-width: 19.511rem; /* 312.18px = 14% smaller (363px * 0.86) */
    }
}

@media (max-width: 1200px) {
    .cloud9-logo {
        height: 7.095rem; /* 113.52px = 14% smaller (132px * 0.86) */
        max-width: 17.7375rem; /* 283.8px = 14% smaller (330px * 0.86) */
    }
}

@media (max-width: 768px) {
    .cloud9-logo {
        height: 6.20875rem; /* 99.33px = 14% smaller (115.5px * 0.86) */
        max-width: 15.963rem; /* 255.42px = 14% smaller (297px * 0.86) */
        right: 0.625rem; /* 10px = 0.625rem */
    }
}

/* Navbar brand text styling - 10% bigger - FORCE REFRESH */
.navbar-brand {
    font-size: 1.7188rem !important; /* 10% bigger: 1.5625 * 1.10 = 1.7188rem */
    color: #ffffff !important;
    font-weight: 500 !important;
}

.navbar-brand i {
    font-size: 1.375rem !important; /* 10% bigger: 1.25 * 1.10 = 1.375rem */
    position: relative;
    top: -2px; /* Move icon 2px higher */
    color: #ffffff !important;
}

/* Canvas container styling with t-shirt background */
#canvasContainer {
    background: url('/static/images/white-tshirt-background.jpg') no-repeat center center;
    background-size: calc(100% + 4px) calc(100% + 4px); /* Extend 2px beyond container on all sides */
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    width: 698px; /* Fixed width - 15% larger, matches t-shirt aspect ratio */
    min-width: 698px; /* Minimum width to prevent compression */
    height: 630px; /* Fixed height - 15% larger, reduced by 1px */
    margin: 0 auto;
    overflow: hidden; /* Hide any overflow */
}

/* Canvas styling - transparent to show t-shirt background */
#designCanvas {
    background-color: transparent !important;
    /* Solid border to clearly define design area */
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0.25rem;
}

/* Ensure Fabric.js canvas containers are interactive and properly positioned */
.canvas-container {
    margin-top: -2.8px !important; /* Moved 0.35" lower from original position (0.05" additional) */
    pointer-events: auto !important;
}

#previewCanvas {
    background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), 
                linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f8f9fa 75%), 
                linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

/* Text controls styling */
.form-control-color {
    width: 100% !important;
    height: 31px !important;
    padding: 1px 2px !important;
}

/* Quality analysis text styling - match card text appearance */
.quality-analysis-text {
    color: #000000 !important;
    font-weight: normal !important;
    font-size: inherit !important;
    font-family: inherit !important;
}

/* Font preview in dropdown */
#fontFamily option[value="Arial"] { font-family: Arial, sans-serif; }
#fontFamily option[value="Times New Roman"] { font-family: "Times New Roman", serif; }
#fontFamily option[value="Calibri"] { font-family: Calibri, sans-serif; }
#fontFamily option[value="Helvetica"] { font-family: Helvetica, sans-serif; }
#fontFamily option[value="Georgia"] { font-family: Georgia, serif; }
#fontFamily option[value="Verdana"] { font-family: Verdana, sans-serif; }
#fontFamily option[value="Tahoma"] { font-family: Tahoma, sans-serif; }
#fontFamily option[value="Trebuchet MS"] { font-family: "Trebuchet MS", sans-serif; }
#fontFamily option[value="Comic Sans MS"] { font-family: "Comic Sans MS", cursive; }
#fontFamily option[value="Impact"] { font-family: Impact, sans-serif; }
#fontFamily option[value="Courier New"] { font-family: "Courier New", monospace; }
#fontFamily option[value="Segoe UI"] { font-family: "Segoe UI", sans-serif; }
#fontFamily option[value="Roboto"] { font-family: "Roboto", sans-serif; }
#fontFamily option[value="Open Sans"] { font-family: "Open Sans", sans-serif; }
#fontFamily option[value="Lato"] { font-family: "Lato", sans-serif; }
#fontFamily option[value="Montserrat"] { font-family: "Montserrat", sans-serif; }
#fontFamily option[value="Poppins"] { font-family: "Poppins", sans-serif; }
#fontFamily option[value="Nunito"] { font-family: "Nunito", sans-serif; }
#fontFamily option[value="Inter"] { font-family: "Inter", sans-serif; }
#fontFamily option[value="Playfair Display"] { font-family: "Playfair Display", serif; }
#fontFamily option[value="Oswald"] { font-family: "Oswald", sans-serif; }
#fontFamily option[value="Merriweather"] { font-family: "Merriweather", serif; }
#fontFamily option[value="Dancing Script"] { font-family: "Dancing Script", cursive; }
#fontFamily option[value="Pacifico"] { font-family: "Pacifico", cursive; }
#fontFamily option[value="Century Gothic"] { font-family: "Century Gothic", sans-serif; }
#fontFamily option[value="Franklin Gothic Medium"] { font-family: "Franklin Gothic Medium", sans-serif; }
#fontFamily option[value="Lucida Sans Unicode"] { font-family: "Lucida Sans Unicode", sans-serif; }
#fontFamily option[value="Book Antiqua"] { font-family: "Book Antiqua", serif; }
#fontFamily option[value="Palatino Linotype"] { font-family: "Palatino Linotype", serif; }
#fontFamily option[value="Source Sans Pro"] { font-family: "Source Sans Pro", sans-serif; }
#fontFamily option[value="Raleway"] { font-family: "Raleway", sans-serif; }
#fontFamily option[value="Ubuntu"] { font-family: "Ubuntu", sans-serif; }
#fontFamily option[value="Work Sans"] { font-family: "Work Sans", sans-serif; }
#fontFamily option[value="Libre Baskerville"] { font-family: "Libre Baskerville", serif; }
#fontFamily option[value="PT Sans"] { font-family: "PT Sans", sans-serif; }
#fontFamily option[value="Quicksand"] { font-family: "Quicksand", sans-serif; }
#fontFamily option[value="Crimson Text"] { font-family: "Crimson Text", serif; }
#fontFamily option[value="Fira Sans"] { font-family: "Fira Sans", sans-serif; }
#fontFamily option[value="Bebas Neue"] { font-family: "Bebas Neue", cursive; }
#fontFamily option[value="Anton"] { font-family: "Anton", sans-serif; }
#fontFamily option[value="Lobster"] { font-family: "Lobster", cursive; }
#fontFamily option[value="Great Vibes"] { font-family: "Great Vibes", cursive; }
#fontFamily option[value="Righteous"] { font-family: "Righteous", cursive; }

/* File upload styling */
#imageUpload {
    cursor: pointer;
}

#imageUpload:hover {
    border-color: var(--bs-primary);
}

/* Progress bar animation */
.progress-bar {
    transition: width 0.3s ease;
}

/* Loading spinner */
.fa-spin {
    animation: fa-spin 2s infinite linear;
}

/* Card hover effects */
.card {
    transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Button group styling */
.btn-group-vertical .btn {
    margin-bottom: 0.25rem;
}

.btn-group-vertical .btn:last-child {
    margin-bottom: 0;
}

/* Canvas has fixed dimensions - no scaling */
#designCanvas {
    /* Fixed dimensions set in JavaScript */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Canvas maintains fixed dimensions - no responsive changes */
    
    .display-4 {
        font-size: 2rem;
    }
}

@media (max-width: 1200px) {
    /* Canvas maintains fixed dimensions - no responsive changes */
}

/* Success and error states */
.alert {
    border-radius: 0.375rem;
}

/* Modal enhancements */
.modal-content {
    border-radius: 0.5rem;
}

/* Tool button states */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Instructions section */
.fa-2x {
    margin-bottom: 0.5rem;
}

/* Canvas selection indicators */
.canvas-container {
    position: relative;
}

/* Fabric.js control styling adjustments */
.canvas-container .upper-canvas {
    border-radius: 0.375rem;
}

/* Drag and drop styling */
.dragover {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* Upload progress styling */
#uploadProgress .progress {
    height: 0.5rem;
}

/* Form validation states */
.was-validated .form-control:valid {
    border-color: var(--bs-success);
    background-image: none;
}

.was-validated .form-control:invalid {
    border-color: var(--bs-danger);
    background-image: none;
}

/* Custom scrollbar for tools panel */
.card-body {
    overflow-y: auto;
}

.card-body::-webkit-scrollbar {
    width: 6px;
}

.card-body::-webkit-scrollbar-track {
    background: transparent;
}

.card-body::-webkit-scrollbar-thumb {
    background: var(--bs-secondary);
    border-radius: 3px;
}

.card-body::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}