/* Scarlet - Pet Sanctuary Management System */

body {
    background-color: #f8f9fa;
}

.login-container {
    max-width: 400px;
    margin: 80px auto;
}

.card {
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.pet-image-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.pet-image-large {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.pet-profile-image {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 8px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.image-grid-item {
    position: relative;
}

.image-grid-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
}

.image-grid-item .badge {
    position: absolute;
    top: 5px;
    left: 5px;
}

/* Image Editor */
.paste-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    background: #fafafa;
    transition: border-color 0.2s;
}

.paste-zone:hover {
    border-color: #999;
}

.editor-container {
    max-height: 500px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
}

.editor-container img {
    display: block;
    max-width: 100%;
}

.table th {
    white-space: nowrap;
}

.btn-group-sm .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

/* Dark Mode */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] {
    background-color: #1a1a2e;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .card {
    background-color: #16213e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .table {
    color: #e0e0e0;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: #e0e0e0;
    --bs-table-bg-type: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #0f3460;
    border-color: #1a4a7a;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #8899aa;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #0f3460;
    border-color: #4a90d9;
    color: #e0e0e0;
    box-shadow: 0 0 0 0.25rem rgba(74, 144, 217, 0.25);
}

[data-bs-theme="dark"] .form-control-plaintext {
    color: #e0e0e0;
}

[data-bs-theme="dark"] .bg-light {
    background-color: #1a2744 !important;
}

[data-bs-theme="dark"] .text-muted {
    color: #8899aa !important;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: #4a1a1a;
    border-color: #6b2d2d;
    color: #f0a0a0;
}

[data-bs-theme="dark"] .alert-success {
    background-color: #1a3a1a;
    border-color: #2d5a2d;
    color: #a0e0a0;
}

[data-bs-theme="dark"] .alert-info {
    background-color: #1a2a3a;
    border-color: #2d4a5a;
    color: #a0d0e0;
}

[data-bs-theme="dark"] .paste-zone {
    border-color: #334;
    background: #16213e;
}

[data-bs-theme="dark"] .paste-zone:hover {
    border-color: #556;
}

[data-bs-theme="dark"] a {
    color: #6db3f2;
}

[data-bs-theme="dark"] .navbar a,
[data-bs-theme="dark"] .navbar .nav-link {
    color: rgba(255, 255, 255, 0.55);
}

[data-bs-theme="dark"] .navbar .nav-link:hover {
    color: rgba(255, 255, 255, 0.75);
}

[data-bs-theme="dark"] .navbar .navbar-brand {
    color: #fff;
}

[data-bs-theme="dark"] .btn-outline-primary {
    color: #6db3f2;
    border-color: #6db3f2;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: #aab;
    border-color: #556;
}

[data-bs-theme="dark"] .btn-outline-danger {
    color: #f08080;
    border-color: #f08080;
}

[data-bs-theme="dark"] .btn-outline-info {
    color: #6dd5ed;
    border-color: #6dd5ed;
}

[data-bs-theme="dark"] footer {
    color: #556 !important;
}

[data-bs-theme="dark"] .login-container svg g {
    fill: #e0e0e0;
}

[data-bs-theme="dark"] .login-container svg text {
    fill: #e0e0e0;
}

[data-bs-theme="dark"] .list-group-item {
    background-color: #16213e;
    border-color: #1a4a7a;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .form-check-input {
    background-color: #0f3460;
    border-color: #1a4a7a;
}

.dark-toggle {
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem !important;
}