/*
 * Heropom backend — warm ivory / champagne gold theme
 * Shared visual override loaded after each page's legacy inline styles.
 */
:root {
    --bg-color: #f7f2e8 !important;
    --sidebar-bg: #fffaf0 !important;
    --card-bg: rgba(255, 253, 247, 0.96) !important;
    --card-border: rgba(181, 132, 35, 0.24) !important;
    --gold-gradient: linear-gradient(135deg, #f8e8a9 0%, #d9a72d 52%, #a87513 100%) !important;
    --gold-color: #b7831f !important;
    --gold-hover: #966812 !important;
    --text-light: #3f3527 !important;
    --text-muted: #7c705f !important;
    --header-bg: rgba(255, 251, 242, 0.94) !important;
    --glow-color: rgba(194, 145, 40, 0.10) !important;
    --accent-green: #4e9b78 !important;
    --male-color: #497eaa !important;
    --female-color: #b96f87 !important;
    --glass-bg: rgba(255, 253, 247, 0.94) !important;
    --glass-border: rgba(181, 132, 35, 0.28) !important;
    color-scheme: light;
}

html {
    background: #f7f2e8;
}

body,
.main-content,
.content-wrapper,
.content-area,
.page-content {
    background-color: #f7f2e8 !important;
    background-image:
        radial-gradient(circle at 92% 3%, rgba(218, 174, 72, 0.12), transparent 28%),
        linear-gradient(180deg, #fbf7ef 0%, #f7f2e8 100%) !important;
    color: #3f3527 !important;
}

.main-content {
    width: calc(100% - 280px) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

.content-body,
.content-area,
.page-content {
    min-width: 0 !important;
    max-width: 100% !important;
}

body::before,
body::after {
    opacity: 0.5 !important;
}

/* Shared navigation */
.sidebar {
    background: linear-gradient(180deg, #fffdf8 0%, #f7edda 100%) !important;
    border-right: 1px solid rgba(181, 132, 35, 0.30) !important;
    box-shadow: 8px 0 28px rgba(105, 78, 31, 0.08) !important;
}

.sidebar-brand {
    border-bottom-color: rgba(181, 132, 35, 0.22) !important;
}

.brand-logo {
    filter: drop-shadow(0 4px 8px rgba(121, 82, 12, 0.18)) !important;
}

.brand-text {
    background: linear-gradient(135deg, #8d6111, #d6a62f) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.menu-section-title {
    color: #9b8869 !important;
}

.menu-item a {
    color: #665b4a !important;
}

.menu-item a:hover {
    color: #64430a !important;
    background: #fff6df !important;
    border-color: rgba(181, 132, 35, 0.28) !important;
    box-shadow: 0 5px 14px rgba(143, 102, 23, 0.10) !important;
}

.menu-item.active a {
    color: #3f2b08 !important;
    background: linear-gradient(135deg, #f8e8a9 0%, #d9a72d 62%, #bd861b 100%) !important;
    border-color: rgba(153, 103, 10, 0.18) !important;
    box-shadow: 0 7px 18px rgba(169, 119, 21, 0.24) !important;
}

.sidebar-profile {
    background: rgba(238, 220, 183, 0.42) !important;
    border-top-color: rgba(181, 132, 35, 0.24) !important;
}

.profile-avatar {
    color: #a77518 !important;
    background: #fffaf0 !important;
    border-color: #c99527 !important;
}

.profile-name,
.welcome-msg,
.page-title,
.section-title,
.card-title,
.modal-title {
    color: #403526 !important;
}

.profile-role,
.welcome-msg span {
    color: #a87513 !important;
}

/* Header and primary surfaces */
.top-header,
.main-header,
.page-header {
    background: rgba(255, 251, 242, 0.95) !important;
    border-color: rgba(181, 132, 35, 0.24) !important;
    box-shadow: 0 7px 22px rgba(105, 78, 31, 0.07) !important;
    color: #403526 !important;
}

.stat-card,
.stats-card,
.tabs-card,
.looker-card,
.bottom-card,
.content-card,
.data-card,
.filter-card,
.filter-panel,
.table-card,
.table-responsive-card,
.form-card,
.calendar-card,
.summary-card,
.panel,
.box,
.card {
    background: rgba(255, 253, 247, 0.97) !important;
    border-color: rgba(181, 132, 35, 0.24) !important;
    box-shadow: 0 10px 26px rgba(104, 78, 35, 0.08) !important;
    color: #403526 !important;
}

.stat-card:hover,
.content-card:hover,
.data-card:hover,
.card:hover {
    border-color: rgba(181, 132, 35, 0.42) !important;
    box-shadow: 0 13px 30px rgba(147, 103, 21, 0.13) !important;
}

.breed-card,
.bottom-item,
.tab-buttons,
.quick-stat,
.info-item,
.detail-item {
    background: #fbf5e9 !important;
    border-color: rgba(181, 132, 35, 0.18) !important;
    color: #493e2e !important;
}

.stat-label,
.stat-value-title,
.subtitle,
.form-hint,
.text-muted,
.empty-state,
small {
    color: #7c705f !important;
}

.stat-value-big,
.breed-total,
.bottom-item-name,
.highlight,
.accent-text {
    color: #ad7918 !important;
}

/* Forms and filters */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.form-control,
.form-control-input,
.edit-form-control,
.search-input,
.select-filter,
.limit-select {
    background-color: #fffdf8 !important;
    border-color: rgba(181, 132, 35, 0.30) !important;
    color: #403526 !important;
    box-shadow: inset 0 1px 2px rgba(105, 78, 31, 0.04) !important;
}

input::placeholder,
textarea::placeholder {
    color: #a19583 !important;
    opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-control-input:focus,
.search-input:focus,
.select-filter:focus {
    border-color: #c18b20 !important;
    box-shadow: 0 0 0 3px rgba(193, 139, 32, 0.14) !important;
    outline: none !important;
}

select option {
    background: #fffdf8 !important;
    color: #403526 !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: sepia(1) saturate(2.2) hue-rotate(355deg) brightness(0.72) !important;
}

/* Buttons */
.btn-primary,
.add-btn,
.action-btn.primary,
.submit-btn,
.save-btn,
.export-btn,
.import-btn,
.tab-btn.active {
    background: linear-gradient(135deg, #f8e8a9 0%, #d9a72d 60%, #b77c12 100%) !important;
    border-color: #c18b20 !important;
    color: #3f2b08 !important;
    box-shadow: 0 5px 13px rgba(169, 119, 21, 0.18) !important;
}

.btn-primary:hover,
.add-btn:hover,
.action-btn.primary:hover,
.submit-btn:hover,
.save-btn:hover,
.export-btn:hover,
.import-btn:hover {
    background: linear-gradient(135deg, #f4dc85 0%, #c89120 62%, #9c6810 100%) !important;
    color: #2f2007 !important;
}

.btn-secondary,
.logout-btn,
.reset-btn,
.filter-btn,
.action-btn:not(.primary):not(.danger) {
    background: #fff9eb !important;
    border-color: rgba(181, 132, 35, 0.45) !important;
    color: #976815 !important;
}

.btn-secondary:hover,
.logout-btn:hover,
.reset-btn:hover,
.filter-btn:hover {
    background: #f5e5bc !important;
    color: #684509 !important;
}

.btn-danger,
.delete-btn,
.action-btn.danger {
    background: #fff0ed !important;
    border-color: #e5a59c !important;
    color: #b64d43 !important;
}

/* Tables */
.table-wrapper,
.table-responsive,
.data-table-container {
    background: #fffdf8 !important;
    border: 1px solid rgba(181, 132, 35, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(104, 78, 35, 0.10) !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

table,
.custom-data-table,
.custom-table,
.data-table {
    color: #493e2e !important;
    background: #fffdf8 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

thead,
table thead tr,
.custom-data-table thead tr,
.custom-table thead tr,
.data-table thead tr {
    background: linear-gradient(180deg, #f7e7bd 0%, #eed59c 100%) !important;
}

th,
.custom-data-table th,
.custom-table th,
.data-table th {
    background: linear-gradient(180deg, #f7e7bd 0%, #eed59c 100%) !important;
    color: #624510 !important;
    border-right: 1px solid rgba(164, 112, 17, 0.13) !important;
    border-bottom: 2px solid #c99325 !important;
    font-size: 0.80rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

th:last-child,
.custom-data-table th:last-child,
.custom-table th:last-child,
.data-table th:last-child {
    border-right: 0 !important;
}

td,
.custom-data-table td,
.custom-table td,
.data-table td {
    color: #514637 !important;
    border-right: 1px solid rgba(181, 132, 35, 0.09) !important;
    border-bottom: 1px solid rgba(181, 132, 35, 0.18) !important;
    background-color: transparent !important;
    line-height: 1.45 !important;
}

td:last-child,
.custom-data-table td:last-child,
.custom-table td:last-child,
.data-table td:last-child {
    border-right: 0 !important;
}

tbody tr,
.custom-data-table tbody tr,
.custom-table tbody tr,
.data-table tbody tr {
    background: #fffdf8 !important;
    transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
}

tbody tr:nth-child(even),
.custom-data-table tbody tr:nth-child(even),
.custom-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even) {
    background: #fbf5e8 !important;
}

.custom-data-table tbody tr:nth-child(odd) td,
.custom-table tbody tr:nth-child(odd) td,
.data-table tbody tr:nth-child(odd) td {
    background-color: #fffdf8 !important;
    border-bottom: 1px solid rgba(181, 132, 35, 0.18) !important;
}

.custom-data-table tbody tr:nth-child(even) td,
.custom-table tbody tr:nth-child(even) td,
.data-table tbody tr:nth-child(even) td {
    background-color: #fbf5e8 !important;
    border-bottom: 1px solid rgba(181, 132, 35, 0.22) !important;
}

tbody tr:hover,
.custom-data-table tbody tr:hover,
.custom-table tbody tr:hover,
.data-table tbody tr:hover,
.custom-data-table tbody tr:hover td,
.custom-table tbody tr:hover td,
.data-table tbody tr:hover td {
    background: #fff0c8 !important;
}

tbody tr:hover {
    box-shadow: inset 4px 0 0 #d3a032 !important;
}

tbody tr:last-child td {
    border-bottom: 0 !important;
}

.id-cell {
    color: #8b6726 !important;
    font-weight: 700 !important;
}

/* Compact action controls inside data tables */
.action-buttons-cell {
    gap: 7px !important;
}

.action-mini-btn,
.edit-btn,
.view-btn,
.detail-btn {
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(94, 67, 23, 0.08) !important;
}

.action-mini-btn.edit,
.edit-btn {
    background: #fff4d6 !important;
    border-color: #dfbd70 !important;
    color: #8b5d0b !important;
}

.action-mini-btn.edit:hover,
.edit-btn:hover {
    background: linear-gradient(135deg, #f4dc87, #cc941f) !important;
    color: #3b2706 !important;
}

.action-mini-btn.delete,
.delete-btn {
    background: #fff0ed !important;
    border-color: #e6aaa2 !important;
    color: #b64d43 !important;
}

.action-mini-btn.delete:hover,
.delete-btn:hover {
    background: #c65c51 !important;
    border-color: #c65c51 !important;
    color: #fff !important;
}

/* Pastel semantic selectors retain their meaning inside light tables. */
.pet-status-select.status-father {
    background: #edf5ff !important;
    border-color: #a9c9e8 !important;
    color: #356f9d !important;
}

.pet-status-select.status-mother {
    background: #fff0f5 !important;
    border-color: #e7b4c6 !important;
    color: #a85070 !important;
}

.pet-status-select.status-child,
.sale-status-select.ready,
.profile-status-select.enabled,
.pedigree-status-select.sent {
    background: #edf8f2 !important;
    border-color: #aad8c1 !important;
    color: #34775b !important;
}

.sale-status-select.not-ready,
.pedigree-status-select.at-association {
    background: #fff7df !important;
    border-color: #e7c875 !important;
    color: #946716 !important;
}

.sale-status-select.sold,
.profile-status-select.disabled,
.pedigree-status-select.not-started {
    background: #f3f0eb !important;
    border-color: #cfc6b8 !important;
    color: #746a5c !important;
}

/* Pagination follows the champagne table treatment. */
.pagination-container {
    color: #76664d !important;
}

.pagination-btn,
.page-link {
    background: #fffaf0 !important;
    border: 1px solid rgba(181, 132, 35, 0.34) !important;
    color: #865e16 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 6px rgba(104, 78, 35, 0.07) !important;
}

.pagination-btn:hover:not(.disabled),
.page-link:hover {
    background: #f7e6b8 !important;
    border-color: #c18b20 !important;
    color: #5b3c08 !important;
}

.pagination-btn.active,
.page-item.active .page-link {
    background: linear-gradient(135deg, #f4dc87 0%, #d4a12d 58%, #b77c12 100%) !important;
    border-color: #b77c12 !important;
    color: #352306 !important;
    box-shadow: 0 5px 12px rgba(169, 119, 21, 0.20) !important;
}

.pagination-btn.disabled,
.page-item.disabled .page-link {
    background: #f3eee5 !important;
    border-color: #ddd3c4 !important;
    color: #aaa092 !important;
    box-shadow: none !important;
}

a {
    color: #3f8b72;
}

a:hover {
    color: #27705a;
}

/* Dialogs and overlays */
.modal-content,
.edit-modal-content,
.confirm-modal-content,
.modal-dialog,
.dialog-content {
    background: #fffdf8 !important;
    border-color: rgba(181, 132, 35, 0.34) !important;
    color: #403526 !important;
    box-shadow: 0 22px 55px rgba(68, 48, 18, 0.22) !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(181, 132, 35, 0.20) !important;
}

.close,
.modal-close,
.close-btn {
    color: #8e681e !important;
}

/* Login page */
.login-container {
    color: #403526 !important;
}

.login-card {
    background: rgba(255, 253, 247, 0.96) !important;
    border-color: rgba(181, 132, 35, 0.34) !important;
    box-shadow: 0 22px 55px rgba(80, 57, 21, 0.18) !important;
}

.system-subtitle,
.footer-text {
    color: #7c705f !important;
}

.form-input {
    background: #fffaf0 !important;
    border-color: rgba(181, 132, 35, 0.30) !important;
    color: #403526 !important;
}

/* Keep semantic status colors readable on the light theme. */
.success,
.status-success,
.badge-success {
    color: #31775b !important;
}

.warning,
.status-warning,
.badge-warning {
    color: #9a6814 !important;
}

.error,
.danger,
.status-danger,
.badge-danger {
    color: #b64d43 !important;
}

* {
    scrollbar-color: #d4ad5a #f5eddd;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #f5eddd;
}

*::-webkit-scrollbar-thumb {
    background: #d4ad5a;
    border: 2px solid #f5eddd;
    border-radius: 999px;
}

@media (max-width: 900px) {
    .sidebar {
        box-shadow: 5px 0 18px rgba(105, 78, 31, 0.10) !important;
    }

    .main-content {
        width: calc(100% - 72px) !important;
    }

    .content-body,
    .content-area {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}