/* ==============================================================================
   GB STUDIO — Luxury Architectural Atelier Admin Theme
   Ensures consistent Dark Graphite & Gold palette across all browsers and devices
   ============================================================================== */

:root,
[data-bs-theme="dark"],
[data-bs-theme="light"],
html {
    --lte-sidebar-width: 310px !important;
    --bs-body-bg: #111316 !important;
    --bs-body-color: #e4e7eb !important;
    --bs-tertiary-bg: #16181d !important;
    --bs-secondary-bg: #1c1f25 !important;
    --bs-card-bg: #181b20 !important;
    --bs-border-color: #272b33 !important;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08) !important;
    color-scheme: dark !important;
}

body,
.app-wrapper,
.app-main,
.content-wrapper,
.bg-body-tertiary,
.bg-body-secondary {
    background-color: #111316 !important;
    color: #e4e7eb !important;
}

/* ------------------------------------------------------------------------------
   1. TOP NAVBAR & SEARCH
   ------------------------------------------------------------------------------ */
#jazzy-navbar,
nav.app-header.navbar {
    background-color: #0d0f12 !important;
    border-bottom: 1px solid #1f2228 !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}

#jazzy-navbar .nav-link {
    color: #c0c4cc !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    transition: color 0.2s ease;
}

#jazzy-navbar .nav-link:hover {
    color: #dfb279 !important;
}

#jazzy-navbar .form-control-navbar {
    background-color: #181a1f !important;
    border: 1px solid #2a2e36 !important;
    color: #f0f2f5 !important;
    border-radius: 4px 0 0 4px !important;
    font-size: 0.85rem !important;
    padding: 0.4rem 0.75rem !important;
    min-width: 220px !important;
}

#jazzy-navbar .form-control-navbar:focus {
    border-color: #c5a059 !important;
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2) !important;
    outline: none !important;
}

#jazzy-navbar .btn-navbar {
    background-color: #181a1f !important;
    border: 1px solid #2a2e36 !important;
    border-left: none !important;
    color: #c5a059 !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0.4rem 0.75rem !important;
}

#jazzy-navbar .btn-navbar:hover {
    background-color: #232730 !important;
    color: #dfb279 !important;
}

/* ------------------------------------------------------------------------------
   2. BREADCRUMBS & CONTENT HEADER (Removes ugly grey box pill!)
   ------------------------------------------------------------------------------ */
.content-header {
    padding: 1.25rem 0.5rem 0.75rem !important;
}

.content-header h1,
.app-content-header h3,
.content-header h1.m-0 {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.35rem !important;
    letter-spacing: -0.01em !important;
}

/* Breadcrumb reset: strictly no background container box */
.breadcrumb,
.content-header .breadcrumb,
ol.breadcrumb,
.app-content-header .breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.breadcrumb-item,
.breadcrumb-item + .breadcrumb-item::before {
    color: #5c6370 !important;
    font-size: 0.85rem !important;
}

.breadcrumb-item a {
    color: #c5a059 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.breadcrumb-item a:hover {
    color: #dfb279 !important;
    text-decoration: underline !important;
}

.breadcrumb-item.active {
    color: #8c939d !important;
    font-weight: 400 !important;
}

/* ------------------------------------------------------------------------------
   3. SIDEBAR NAVIGATION
   ------------------------------------------------------------------------------ */
#jazzy-sidebar,
aside.app-sidebar,
aside.main-sidebar {
    background-color: #0e1013 !important;
    border-right: 1px solid #1f2228 !important;
}

/* AdminLTE 4 Sidebar Width & CSS Grid Alignment */
:root, [data-bs-theme="dark"], [data-bs-theme="light"] {
    --lte-sidebar-width: 310px !important;
}

.app-sidebar,
#jazzy-sidebar,
aside.app-sidebar,
aside.main-sidebar {
    min-width: 310px !important;
    max-width: 310px !important;
    width: 310px !important;
}

.app-sidebar .sidebar-brand {
    min-width: 310px !important;
    max-width: 310px !important;
    width: 310px !important;
}

/* Ensure AdminLTE 4 grid layout is never displaced by manual margins */
.app-main,
.content-wrapper,
body:not(.sidebar-collapse) .content-wrapper,
body:not(.sidebar-collapse) .main-footer,
body:not(.sidebar-collapse) .main-header {
    margin-left: 0 !important;
}

#jazzy-logo {
    border-bottom: 1px solid #1f2228 !important;
    padding: 0.85rem 1rem !important;
}

#jazzy-logo .brand-text {
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
}

.sidebar-wrapper .user-panel {
    border-bottom: 1px solid #1f2228 !important;
    padding: 0.75rem 1rem !important;
}

.sidebar-wrapper .nav-header {
    color: #636b78 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    padding: 1.25rem 1rem 0.4rem !important;
}

.sidebar-wrapper .nav-link {
    color: #aeb5bf !important;
    border-radius: 4px !important;
    padding: 0.5rem 0.85rem !important;
    margin: 0.15rem 0.5rem !important;
    transition: all 0.15s ease !important;
}

.sidebar-wrapper .nav-link {
    white-space: nowrap !important;
}

.sidebar-wrapper .nav-link p {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    font-size: 0.88rem !important;
    margin: 0 !important;
    padding-left: 0.5rem !important;
}

.sidebar-wrapper .nav-link:hover {
    background-color: #1a1d22 !important;
    color: #ffffff !important;
}

.sidebar-wrapper .nav-link.active {
    background-color: rgba(197, 160, 89, 0.15) !important;
    color: #dfb279 !important;
    font-weight: 600 !important;
    border-left: 2px solid #c5a059 !important;
}

.sidebar-wrapper .nav-link.active i {
    color: #dfb279 !important;
}

/* ------------------------------------------------------------------------------
   4. DASHBOARD CARDS & BALANCED 2-COLUMN LAYOUT (Eliminating the empty void)
   ------------------------------------------------------------------------------ */
/* Spacious full-width dashboard app cards - unconstrained breathing room */
.dashboard .content .col-lg-9 > .row > div[class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.dashboard .content .col-lg-9 > .row > div[class*="col-"]:empty {
    display: none !important;
}

@media (max-width: 991px) {
    .dashboard .content .col-lg-9 > .row > div[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.card {
    background-color: #17191e !important;
    border: 1px solid #262932 !important;
    border-radius: 6px !important;
    margin-bottom: 1.35rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.card-header {
    background-color: #1d2026 !important;
    border-bottom: 1px solid #262932 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.85rem 1.25rem !important;
}

.card-header h5,
.card-header h3.card-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #f0f2f5 !important;
    letter-spacing: 0.02em !important;
}

.card-body {
    background-color: #17191e !important;
    color: #e4e7eb !important;
    padding: 0.5rem 1rem !important;
}

/* ------------------------------------------------------------------------------
   5. ARCHITECTURAL LUXURY BUTTONS (No cheap green/blue Bootstrap)
   ------------------------------------------------------------------------------ */
/* Small action buttons on dashboard and tables */
.btn-xs {
    padding: 0.25rem 0.65rem !important;
    font-size: 0.78rem !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.15s ease !important;
}

/* 'Добавить' Button -> Warm Architectural Gold */
.btn-success,
.addlink,
a.btn-success,
.object-tools .btn-success {
    background: linear-gradient(135deg, #c5a059 0%, #dfb279 100%) !important;
    border: 1px solid #b38f48 !important;
    color: #0b0d10 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(197, 160, 89, 0.2) !important;
}

.btn-success:hover,
.addlink:hover,
a.btn-success:hover,
.object-tools .btn-success:hover {
    background: linear-gradient(135deg, #d4af37 0%, #eed09d 100%) !important;
    border-color: #d4af37 !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35) !important;
}

.btn-success i,
.addlink i {
    color: #0b0d10 !important;
}

/* 'Изменить' Button -> Sleek Dark Graphite with subtle border */
.btn-info,
.changelink,
.viewlink,
a.btn-info {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #d8dde4 !important;
    font-weight: 500 !important;
}

.btn-info:hover,
.changelink:hover,
.viewlink:hover,
a.btn-info:hover {
    background: rgba(197, 160, 89, 0.12) !important;
    border-color: #c5a059 !important;
    color: #dfb279 !important;
}

/* Primary Form Save Button */
.btn-primary,
button[name="_save"],
input[name="_save"],
.submit-row input[type="submit"] {
    background: linear-gradient(135deg, #c5a059 0%, #dfb279 100%) !important;
    border: 1px solid #b38f48 !important;
    color: #0b0d10 !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    padding: 0.55rem 1.4rem !important;
    box-shadow: 0 3px 12px rgba(197, 160, 89, 0.25) !important;
}

.btn-primary:hover,
button[name="_save"]:hover,
input[name="_save"]:hover,
.submit-row input[type="submit"]:hover {
    background: linear-gradient(135deg, #d4af37 0%, #eed09d 100%) !important;
    border-color: #d4af37 !important;
    color: #000 !important;
}

/* Secondary Action Buttons (Save and continue, Save and add another) */
button[name="_addanother"],
input[name="_addanother"],
button[name="_continue"],
input[name="_continue"] {
    background: #1c2026 !important;
    border: 1px solid #2e333d !important;
    color: #d8dde4 !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    padding: 0.55rem 1.25rem !important;
}

button[name="_addanother"]:hover,
input[name="_addanother"]:hover,
button[name="_continue"]:hover,
input[name="_continue"]:hover {
    background: #252b34 !important;
    border-color: #c5a059 !important;
    color: #dfb279 !important;
}

/* Delete Button */
.btn-danger,
.deletelink,
a.deletelink {
    background: rgba(220, 53, 69, 0.14) !important;
    border: 1px solid rgba(220, 53, 69, 0.35) !important;
    color: #fca5a5 !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

.btn-danger:hover,
.deletelink:hover,
a.deletelink:hover {
    background: rgba(220, 53, 69, 0.28) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

/* History Button */
.historylink,
a.historylink {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a0a6b1 !important;
    border-radius: 4px !important;
}

.historylink:hover,
a.historylink:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------------------------
   6. TABLES & CHANGELIST
   ------------------------------------------------------------------------------ */
.table {
    color: #e4e7eb !important;
    margin-bottom: 0 !important;
}

.table th {
    background-color: #1a1d22 !important;
    color: #a0a6b1 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-top: none !important;
    border-bottom: 1px solid #272b33 !important;
    padding: 0.75rem 1rem !important;
}

.table td {
    border-top: 1px solid #20232a !important;
    border-bottom: 1px solid #20232a !important;
    vertical-align: middle !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.88rem !important;
}

.table tbody tr {
    background-color: transparent !important;
    transition: background-color 0.15s ease;
}

.table tbody tr:hover {
    background-color: #1f232a !important;
}

.table tbody tr td a {
    color: #f0f2f5 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.table tbody tr td a:hover {
    color: #dfb279 !important;
}

/* Action Bar in changelist */
.changelist-form .actions {
    background-color: #17191e !important;
    border: 1px solid #262932 !important;
    border-radius: 4px !important;
    padding: 0.65rem 1rem !important;
    margin-bottom: 1rem !important;
}

.actions select.form-control {
    background-color: #141619 !important;
    border: 1px solid #2e333d !important;
    color: #f0f2f5 !important;
    border-radius: 4px !important;
    max-width: 280px !important;
}

.actions .button,
.actions .btn {
    background: #20242b !important;
    border: 1px solid #333842 !important;
    color: #c5a059 !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

.actions .button:hover,
.actions .btn:hover {
    background: #c5a059 !important;
    border-color: #c5a059 !important;
    color: #0b0d10 !important;
}

/* ------------------------------------------------------------------------------
   7. FORM FIELDS & CHANGEFORM (Fixing narrow clipped inputs!)
   ------------------------------------------------------------------------------ */
.form-row {
    padding: 0.85rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.form-row:last-child {
    border-bottom: none !important;
}

.form-group label,
.form-row label,
.col-form-label {
    color: #b5bac4 !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.02em !important;
}

.required label:after,
label.required:after {
    color: #dfb279 !important;
}

.vTextField,
.vURLField,
.vIntegerField,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="number"].form-control,
input[type="password"].form-control,
select.form-control {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #16181d !important;
    border: 1px solid #2a2e36 !important;
    color: #f0f2f5 !important;
    border-radius: 4px !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.925rem !important;
}

.vLargeTextField,
textarea.form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 120px !important;
    background-color: #16181d !important;
    border: 1px solid #2a2e36 !important;
    color: #f0f2f5 !important;
    border-radius: 4px !important;
    padding: 0.75rem 0.85rem !important;
    font-size: 0.925rem !important;
}

/* Focus states */
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.vTextField:focus,
.vURLField:focus,
.vLargeTextField:focus {
    border-color: #c5a059 !important;
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2) !important;
    outline: none !important;
    background-color: #1b1e24 !important;
}

/* ------------------------------------------------------------------------------
   8. RECENT ACTIONS MODULE (TIMELINE)
   ------------------------------------------------------------------------------ */
#recent-actions-module {
    background-color: #17191e !important;
    border: 1px solid #262932 !important;
    border-radius: 6px !important;
    padding: 1.25rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

#recent-actions-module h4 {
    font-size: 0.925rem !important;
    font-weight: 600 !important;
    color: #dfb279 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #262932 !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1.25rem !important;
}

.timeline > div > .timeline-item {
    background-color: #1c2026 !important;
    color: #e4e7eb !important;
    border: 1px solid #282d36 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.timeline > div > i {
    background-color: #17191e !important;
    border: 2px solid #c5a059 !important;
    color: #dfb279 !important;
    box-shadow: 0 0 8px rgba(197, 160, 89, 0.25) !important;
}

.timeline-header {
    border-bottom: 1px solid #242830 !important;
    color: #ffffff !important;
    font-size: 0.86rem !important;
}

.timeline-header a {
    color: #dfb279 !important;
    font-weight: 600 !important;
}

.timeline-body {
    color: #9aa0a6 !important;
    font-size: 0.825rem !important;
}

.timeline-item .badge {
    background-color: rgba(197, 160, 89, 0.15) !important;
    color: #dfb279 !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
    font-weight: 500 !important;
}

/* ------------------------------------------------------------------------------
   9. FOOTER & SCROLLBAR
   ------------------------------------------------------------------------------ */
footer.app-footer,
footer.main-footer {
    background-color: #0d0f12 !important;
    border-top: 1px solid #1f2228 !important;
    color: #636b78 !important;
    font-size: 0.825rem !important;
    padding: 0.75rem 1.25rem !important;
}

footer.app-footer a,
footer.main-footer a {
    color: #c5a059 !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0e1013;
}

::-webkit-scrollbar-thumb {
    background: #252932;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb:hover {
    background: #c5a059;
}