*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow: hidden; /* prevents overflow beyond viewport */
}

.card {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
}

.image-viewport {
    flex: 1;
    display: flex; /* Revert to flexbox */
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center */
    background-color: #e9ecef;
    border-radius: 5px;
    min-height: 0;             /* prevents flexbox overflow issues */
    overflow: hidden;          /* hide overflow in normal mode */
    position: relative;        /* Set a positioning context */
}

.image-viewport.scrollable {
    overflow: auto;            /* allow scrollbars in full-size mode */
    display: block;
}

#photo-container {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

#photo-container.full-size {
    max-width: none;           /* remove constraints in full-size mode */
    max-height: none;
    width: auto;
    height: auto;
}

#drawing-canvas {
    position: absolute; /* Position canvas over the image */
    cursor: crosshair;
    z-index: 10;
}

/* hide canvas in 100% view if needed */
#drawing-canvas.hidden-drawing {
    visibility: hidden;
}

.palette-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.palette-tool {
    width: 30px;
    height: 30px;
    margin: 0 5px;
    border: 2px solid #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.1s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.palette-tool:hover {
    transform: scale(1.1);
}

.palette-tool.active {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

#eraser-tool {
    background-color: #f8f9fa;
    border-color: #ccc;
}

#eraser-tool.active {
    border-color: #007bff;
}

.btn {
}

.btn-primary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-primary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

#new-panel-btn {
    text-transform: capitalize; /* Override the global lowercase rule */
}

.panel-title-btn {
    text-transform: none !important; /* Ensure panel titles are not lowercased */
}

/* --- New Layout Styles for user.php --- */
.split-screen-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1; /* Allow it to fill remaining vertical space */
    min-height: 0; /* Prevent flexbox overflow issues */
}

.split-section {
    border-bottom: 1px solid #444; /* Separator line */
    min-height: 0; /* Prevent flexbox overflow */
}

/* Give the top section a fixed height and its own scrollbar */
.split-section:first-of-type {
    flex: 0 0 35%;
    overflow-y: auto;
}

/* Make the panel section a flex container that takes remaining space */
.split-section:last-child {
    border-bottom: none;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#panels-container {
    flex: 1; /* Allow it to grow to fill available space */
    overflow-y: auto;
    min-height: 0;
    padding: 1rem;
}

.thumbnail-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.thumbnail-item {
    width: 100px;
    height: 100px;
    position: relative;
}

.thumbnail-link {
    display: block;
    height: 100%;
}

.thumbnail-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #555;
    border-radius: 5px;
    transition: transform 0.2s, border-color 0.2s;
}

.thumbnail-item:hover .thumbnail-bg {
    transform: scale(1.1);
    border-color: #0d6efd;
}

.add-new-thumbnail:hover .thumbnail-bg {
    background-color: #444;
    color: #777;
}

.add-new-thumbnail.drag-over .thumbnail-bg {
    box-shadow: 0 0 15px 5px rgba(80, 150, 255, 0.5);
}



/* --- Dark Theme Overrides --- */
body[data-bs-theme="dark"], [data-bs-theme="dark"] body {
    background-color: #222 !important; /* Ensure override */
}

.split-section {
    background-color: #222; /* Dark background for sections */
}

.split-section:first-of-type {
    background-color: #4a4a4a; /* Slightly lighter for the top section */
}

.thumbnail-gallery {
    /* Inherits background from split-section */
    padding: 1rem;
    border-radius: 5px;
}

/* --- Panel Styles --- */
.panel {
    border: 2px dashed #555;
    border-radius: 5px;
    padding: 1rem;
    margin-top: 1rem;
    min-height: 150px;
    background-color: #333; /* Slightly lighter than main background */
}

.panel-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 1rem;
}

.panel-title {
    font-weight: bold;
    text-align: center;
}

.panel-options {
    position: absolute;
    right: 0;
}

.panel.drag-over {
    border-color: #0d6efd;
    background-color: #444; /* Highlight color */
}

.panel.locked {
    border-style: solid;
    border-color: #6c757d; /* A neutral "locked" color */
}

.panel.locked .thumbnail-item {
    cursor: not-allowed;
}

/* Make thumbnails inside panels smaller */
.panel .thumbnail-item {
    display: inline-block;
    margin: 5px;
    width: 60px;
    height: 60px;
}

.panel .delete-btn {
    width: 20px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
}

/* --- Dark Theme Overrides for index.html --- */
[data-bs-theme="dark"] .image-viewport {
    background-color: #111;
}

[data-bs-theme="dark"] #eraser-tool {
    background-color: #444;
    border-color: #666;
}

[data-bs-theme="dark"] #eraser-tool.active {
    border-color: #0d6efd;
}

body.auth-page {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/login-background.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

body.auth-page .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

body.auth-page .container .row {
    width: 100%;
}

.auth-form-container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    color: #333; /* Dark text for readability */
}

.auth-form-container .form-control,
.auth-form-container .form-select {
    background-color: white !important;
    color: black !important;
    border: 1px solid #ced4da; /* Add a standard border for better visibility */
}

.auth-form-container input:-webkit-autofill,
.auth-form-container input:-webkit-autofill:hover,
.auth-form-container input:-webkit-autofill:focus,
.auth-form-container input:-webkit-autofill:active,
.auth-form-container select:-webkit-autofill,
.auth-form-container select:-webkit-autofill:hover,
.auth-form-container select:-webkit-autofill:focus,
.auth-form-container select:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: black !important;
}

.auth-form-container a {
    color: #0d6efd; /* Standard bootstrap link blue */
}

/* --- Layout Preview Styles --- */
#layout-preview {
    position: fixed;
    display: none;
    z-index: 1080; /* Higher than most elements */
    border: 2px solid #fff;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    pointer-events: none; /* So it doesn't interfere with mouse events */
    max-width: 300px;
    max-height: 300px;
    overflow: hidden;
}

#layout-preview-img {
    width: 100%;
    height: auto;
    display: block;
}