/*
 * TKA brand layer (ADR-048 refines ADR-047; ADR-047 supersedes ADR-023).
 *
 * Strategy ("calm chrome, crimson action") — reverse-engineered from the
 * reference dashboard the product owner loves (Vuexy-based, app.tkabilisim.com.tr):
 *
 *   1. Chrome stays NEUTRAL: toolbar band, grid headers, table chrome and
 *      menu surfaces carry no red tint (kept from ADR-047).
 *   2. Actions are DEEP CRIMSON: --bs-primary is remapped to #D90A2C
 *      (reference site primary), darker and calmer than the old #E1212F.
 *   3. Danger stays SEPARATED: Metronic --bs-danger #F8285A (pinkish coral)
 *      is untouched — same hue-split the reference site uses (#EA5455).
 *
 * Brand (--tka-brand) and primary are unified on the crimson family so the
 * UI carries exactly one red.
 */

:root,
[data-bs-theme="light"] {
    /* Brand identity tokens (helpers, auth aside, meta tags). */
    --tka-brand: #D90A2C;
    --tka-brand-rgb: 217, 10, 44;
    --tka-brand-active: #B40825; /* reference-site hover tone */
    --tka-brand-soft: #FAE2E6; /* crimson @ 12% on white, reference-site badge tint */
    --tka-brand-dark: #6E0516;
    --tka-brand-on: #FFFFFF;
    --tka-brand-aside-from: #1A0608;
    --tka-brand-aside-to: #55081A;

    /* Premium card radius - subtle premium feel without breaking demo30 spacing. */
    --tka-card-radius: 1rem; /* 16px */

    /* Typography — reference site uses Montserrat across the board. */
    --bs-body-font-family: Montserrat, Inter, Helvetica, Arial, sans-serif;
    --bs-font-sans-serif: Montserrat, Inter, Helvetica, Arial, sans-serif;

    /* Bootstrap/Metronic primary remap (light) — crimson action color.
     * Cascades to .btn-primary, .text-primary, .link-primary, badges, forms. */
    --bs-primary: #D90A2C;
    --bs-primary-rgb: 217, 10, 44;
    --bs-primary-active: #B40825;
    --bs-primary-light: #FAE2E6;
    --bs-link-color: #D90A2C;
    --bs-link-color-rgb: 217, 10, 44;
    --bs-link-hover-color: #B40825;
    --bs-link-hover-color-rgb: 180, 8, 37;
    --bs-btn-link-color: #D90A2C;
    --bs-btn-link-hover-color: #B40825;
    --bs-component-active-bg: #D90A2C;

    /* Demo30 toolbar ships a loud solid-blue band; ADR-047 keeps it as a
     * seamless neutral canvas matching the page background so cards float
     * on a calm surface (reference site uses neutral chrome the same way). */
    --bs-app-toolbar-bg: var(--bs-app-bg-color, #F4F6FA);
}

[data-bs-theme="dark"] {
    /* Reference site keeps the SAME crimson in dark mode (no lifting) and
     * pairs it with neutral charcoal surfaces — Metronic's navy-tinted dark
     * is remapped to the reference palette (#121415 canvas / #1B1B1B card). */
    --tka-brand: #D90A2C;
    --tka-brand-rgb: 217, 10, 44;
    --tka-brand-active: #B40825;
    --tka-brand-soft: #2B0A12;
    --tka-brand-dark: #FAE2E6;
    --tka-brand-on: #FFFFFF;
    --tka-brand-aside-from: #0A0203;
    --tka-brand-aside-to: #38070F;

    --tka-card-radius: 1rem;

    --bs-body-font-family: Montserrat, Inter, Helvetica, Arial, sans-serif;
    --bs-font-sans-serif: Montserrat, Inter, Helvetica, Arial, sans-serif;

    --bs-primary: #D90A2C;
    --bs-primary-rgb: 217, 10, 44;
    --bs-primary-active: #B40825;
    --bs-primary-light: #2B0A12;
    --bs-link-color: #E8294A; /* slightly lifted for small-text legibility on dark */
    --bs-link-color-rgb: 232, 41, 74;
    --bs-link-hover-color: #D90A2C;
    --bs-link-hover-color-rgb: 217, 10, 44;
    --bs-btn-link-color: #E8294A;
    --bs-btn-link-hover-color: #D90A2C;
    --bs-component-active-bg: #D90A2C;

    /* Neutral charcoal dark surfaces (reference-site calibration).
     * Metronic dark ships a navy-tinted palette; the full ladder is remapped
     * to neutral charcoal so headers, menus, inputs and hover states match
     * the reference look — token-only, vendor untouched. */
    --bs-body-bg: #1B1B1B;
    --bs-body-bg-rgb: 27, 27, 27;
    --bs-app-bg-color: #121415;
    --bs-app-toolbar-bg: var(--bs-app-bg-color, #121415);
    --bs-app-header-base-bg-color: #1B1B1B;
    --bs-app-header-sticky-bg-color: #1B1B1B;

    --bs-gray-100: #232323;
    --bs-gray-100-rgb: 35, 35, 35;
    --bs-gray-200: #2A2A2A;
    --bs-gray-200-rgb: 42, 42, 42;
    --bs-gray-300: #3A3A3A;
    --bs-gray-300-rgb: 58, 58, 58;
    --bs-gray-400: #4A4A4A;
    --bs-gray-400-rgb: 74, 74, 74;
    --bs-gray-500: #6B6B6B;
    --bs-gray-500-rgb: 107, 107, 107;
    --bs-gray-600: #8C8C8C;
    --bs-gray-600-rgb: 140, 140, 140;
    --bs-gray-700: #A6A6A6;
    --bs-gray-700-rgb: 166, 166, 166;
    --bs-gray-800: #C4C4C4;
    --bs-gray-800-rgb: 196, 196, 196;
    --bs-gray-900: #F2F2F2;
    --bs-gray-900-rgb: 242, 242, 242;
    --bs-light: #232323;
    --bs-light-rgb: 35, 35, 35;
    --bs-secondary: #3A3A3A;
    --bs-secondary-rgb: 58, 58, 58;
    --bs-border-color: #2A2A2A;
    --bs-text-muted: #707070;
}

/* Body font enforcement — Metronic bundle sets Inter directly on body. */
body {
    font-family: var(--bs-body-font-family);
}

/* ===========================================================================
 * Brand-touch helper classes (used directly in markup, not Metronic overrides).
 * =========================================================================== */

/* Auth login (reference: app.tkabilisim.com.tr/login — Vuexy auth-v2). */
.tka-auth-page {
    background-color: #121415;
}

.tka-auth-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
}

.tka-auth-slider-col {
    position: relative;
    background: #121414;
    min-height: 100vh;
    min-height: 100dvh;
}

.tka-auth-brand-mark {
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 3;
}

.tka-auth-slide-img {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    object-position: center;
    display: block;
}

.tka-auth-slider-col .carousel,
.tka-auth-slider-col .carousel-inner,
.tka-auth-slider-col .carousel-item {
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.tka-auth-slider-col .carousel-indicators {
    margin-bottom: 1.5rem;
    z-index: 2;
}

.tka-auth-slider-col .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.45);
    border: 0;
    opacity: 1;
}

.tka-auth-slider-col .carousel-indicators .active {
    background-color: #ffffff;
}

.tka-auth-slider-col .carousel-control-prev,
.tka-auth-slider-col .carousel-control-next {
    z-index: 2;
    width: 8%;
}

.tka-auth-panel {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #121415;
}

.tka-auth-panel__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 2.5rem 1rem;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.tka-auth-panel__footer {
    flex-shrink: 0;
    padding: 0 2.5rem 2rem;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.tka-auth-card {
    width: 100%;
}

.tka-auth-panel .tka-auth-input,
.tka-auth-panel .form-control {
    background-color: transparent;
    border: 1px solid #494946;
    color: #ffffff;
}

.tka-auth-panel .tka-auth-input:focus,
.tka-auth-panel .form-control:focus {
    border-color: var(--tka-brand);
    color: #ffffff;
    box-shadow: none;
}

.tka-auth-panel .text-gray-900 {
    color: #ffffff !important;
}

.tka-auth-panel .separator.separator-content::before,
.tka-auth-panel .separator.separator-content::after {
    border-color: #494946;
}

@media (max-width: 991.98px) {
    .tka-auth-panel__content {
        padding-top: 3rem;
    }

    .tka-auth-form-logo {
        text-align: center;
    }
}

/* App footer top accent - 2px brand separator above the footer row. */
.tka-footer-accent {
    border-top: 2px solid var(--tka-brand);
}

/* Sticky app shell footer (_AppLayout): short pages keep the footer at the
 * viewport bottom; long pages scroll normally. */
#kt_app_body.app-default {
    min-height: 100vh;
    min-height: 100dvh;
}

#kt_app_root.app-root {
    min-height: 100%;
    flex: 1 1 auto;
}

#kt_app_page.app-page {
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 100%;
}

#kt_app_wrapper {
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

#kt_app_wrapper > .app-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#kt_app_main.app-main {
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

#kt_app_main > .flex-column-fluid:first-of-type {
    flex: 1 1 auto;
}

#kt_app_footer.app-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* Auth CTA button (Identity Account pages). Brand and primary share the same
 * crimson family, so this stays visually consistent with btn-primary while
 * remaining independently addressable. */
.tka-btn-brand {
    --bs-btn-color: var(--tka-brand-on);
    --bs-btn-bg: var(--tka-brand);
    --bs-btn-border-color: var(--tka-brand);
    --bs-btn-hover-color: var(--tka-brand-on);
    --bs-btn-hover-bg: var(--tka-brand-active);
    --bs-btn-hover-border-color: var(--tka-brand-active);
    --bs-btn-focus-shadow-rgb: var(--tka-brand-rgb);
    --bs-btn-active-color: var(--tka-brand-on);
    --bs-btn-active-bg: var(--tka-brand-active);
    --bs-btn-active-border-color: var(--tka-brand-active);
    --bs-btn-disabled-color: var(--tka-brand-on);
    --bs-btn-disabled-bg: var(--tka-brand);
    --bs-btn-disabled-border-color: var(--tka-brand);
}

/* Reference-site button hover: soft crimson glow instead of flat darken. */
.btn.btn-primary:hover:not(.disabled):not(:disabled),
.btn.tka-btn-brand:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--bs-primary);
}

/* ===========================================================================
 * Selective Metronic overrides where a pure variable remap is not possible.
 * =========================================================================== */

/* Demo30 menu - active and hover states carry the brand identity.
 * Scoped to the app shell menus (topbar + sidebar) so dropdown/auth menus
 * stay on their own colors. */
#kt_app_header_menu .menu-link.active,
#kt_app_header_menu .menu-link.here,
#kt_app_header_menu .menu-link:hover,
#kt_app_header_menu .menu-item.show > .menu-link {
    color: var(--tka-brand);
}

/* Premium rounded card corners (Metronic default 0.625rem -> 1rem). */
.card {
    border-radius: var(--tka-card-radius);
}

/* Defined header edge: clean junction line against sidebar and canvas. */
#kt_app_header {
    border-bottom: 1px solid var(--bs-gray-200, #F1F1F4);
}

/* ===========================================================================
 * App sidebar (ADR-049 hybrid shell). Demo30 ships the generic app-sidebar
 * layout engine but no demo30-specific sidebar theme.
 *
 * Surface decision (rev3 — owner feedback + reference site): the sidebar is
 * THEME-AWARE like the reference app — white in light mode, charcoal in dark.
 * Active item is a solid crimson block with white text in both themes.
 * Behavior: expanded by default; the chevron toggle collapses it to a 72px
 * icon rail (no hover expansion — explicitly removed per owner request).
 * State persists via js/system/sidebar.js + localStorage.
 * =========================================================================== */

:root,
[data-bs-theme="light"] {
    --bs-app-sidebar-base-bg-color: #FFFFFF;
}

[data-bs-theme="dark"] {
    --bs-app-sidebar-base-bg-color: #161616;
}

/* Custom widths: 260px expanded / 72px rail. Loaded after vendor so the
 * equal-specificity vendor defaults (300px/75px) are overridden. */
@media (min-width: 992px) {
    [data-kt-app-sidebar-enabled="true"] {
        --bs-app-sidebar-width: 260px;
        --bs-app-sidebar-width-actual: 260px;
    }

    [data-kt-app-sidebar-enabled="true"][data-kt-app-sidebar-minimize="on"] {
        --bs-app-sidebar-width: 72px;
    }
}

/* Theme-aware junction edge (gray-200 is remapped per theme). */
#kt_app_sidebar {
    border-right: 1px solid var(--bs-gray-200, #F1F1F4);
}

/* Logo row — same height as the header so the two shells align. */
#kt_app_sidebar .app-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: var(--bs-app-header-height, 70px);
    padding: 0 1.25rem;
    overflow: hidden;
}

#kt_app_sidebar .app-sidebar-logo-link img {
    height: 26px;
    width: auto;
}

/* Header toggle — always reachable regardless of sidebar width. */
.tka-sidebar-toggle {
    flex-shrink: 0;
}

.tka-sidebar-toggle i {
    transition: transform 0.3s ease;
}

[data-kt-app-sidebar-minimize="on"] .tka-sidebar-toggle i {
    transform: rotate(180deg);
}

/* Footer brand block (10 yil premium signature). */
#kt_app_sidebar .app-sidebar-footer {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    border-top: 1px dashed var(--bs-gray-200, #F1F1F4);
}

#kt_app_sidebar .app-sidebar-footer-img {
    max-width: 150px;
    max-height: 56px;
    width: auto;
    opacity: 0.9;
}

/* Menu colors — theme variables so the surface swap stays coherent. */
#kt_app_sidebar_menu .menu-item {
    margin-bottom: 0.125rem;
}

#kt_app_sidebar_menu .menu-link {
    border-radius: 0.5rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    color: var(--bs-gray-700);
    transition: background-color 0.15s ease, color 0.15s ease;
}

#kt_app_sidebar_menu .menu-link .menu-title {
    color: inherit;
}

#kt_app_sidebar_menu .menu-link .menu-icon,
#kt_app_sidebar_menu .menu-link .menu-icon i,
#kt_app_sidebar_menu .menu-link .menu-arrow {
    color: var(--bs-gray-500);
    transition: color 0.15s ease;
}

/* Reference-site sidebar: soft crimson hover, solid crimson active block. */
#kt_app_sidebar_menu .menu-link:hover {
    color: var(--tka-brand);
    background-color: var(--tka-brand-soft);
}

#kt_app_sidebar_menu .menu-link:hover .menu-icon i,
#kt_app_sidebar_menu .menu-link:hover .menu-arrow {
    color: var(--tka-brand);
}

#kt_app_sidebar_menu .menu-link.active,
#kt_app_sidebar_menu .menu-link.active:hover {
    color: #ffffff;
    background-color: var(--tka-brand);
}

#kt_app_sidebar_menu .menu-link.active .menu-icon i,
#kt_app_sidebar_menu .menu-link.active .menu-arrow,
#kt_app_sidebar_menu .menu-link.active:hover .menu-icon i,
#kt_app_sidebar_menu .menu-link.active:hover .menu-arrow {
    color: #ffffff;
}

[data-bs-theme="dark"] #kt_app_sidebar_menu .menu-link:hover {
    color: #ffffff;
    background-color: rgba(var(--tka-brand-rgb), 0.22);
}

[data-bs-theme="dark"] #kt_app_sidebar_menu .menu-link:hover .menu-icon i,
[data-bs-theme="dark"] #kt_app_sidebar_menu .menu-link:hover .menu-arrow {
    color: #ffffff;
}

/* Minimized rail (lg+): icons only — static state, no hover expansion. */
@media (min-width: 992px) {
    [data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-title,
    [data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-arrow,
    [data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-sub,
    [data-kt-app-sidebar-minimize="on"] .app-sidebar .app-sidebar-footer {
        display: none;
    }

    [data-kt-app-sidebar-minimize="on"] .app-sidebar .app-sidebar-logo-link {
        justify-content: center;
        width: 100%;
    }

    [data-kt-app-sidebar-minimize="on"] .app-sidebar .app-sidebar-logo-link img {
        height: 22px;
    }

    [data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-link {
        justify-content: center;
    }

    [data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-link .menu-icon {
        margin-right: 0;
    }

    [data-kt-app-sidebar-minimize="on"] .app-sidebar .app-sidebar-logo {
        justify-content: center;
        padding: 0;
    }
}

/* Topbar handwritten "premium teknik servis" script (tkapics asset). */
.tka-header-script {
    height: 22px;
    width: auto;
    opacity: 0.85;
}

/* Badge soft variant - explicit override because Metronic ships some badge
 * variants with hardcoded colors instead of --bs-primary-light consumers.
 * Reference-site pattern: 12% crimson tint + solid crimson text. */
.badge-light-primary {
    background-color: var(--tka-brand-soft);
    color: var(--tka-brand);
}

[data-bs-theme="dark"] .badge-light-primary {
    background-color: var(--tka-brand-soft);
    color: var(--tka-brand);
}

/* ===========================================================================
 * Canvas layout (ADR-049 rev2): demo30 wraps the whole page in ONE giant
 * rounded white content card pulled up over the toolbar band — the "patched
 * on" look. Disabled here: .app-content becomes a transparent canvas region
 * and individual .card surfaces float on the neutral page background with
 * their own gentle elevation (Keen-style composition).
 * =========================================================================== */

.app-content {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Vendor forces a tall hero band under the toolbar (160px on lg) and pulls
 * the content card up over it; with the canvas layout the toolbar is just a
 * slim breadcrumb bar. */
#kt_app_toolbar.app-toolbar {
    padding-bottom: 1rem !important;
}

@media (min-width: 992px) {
    .app-content {
        margin-top: 0;
    }
}

@media (max-width: 991.98px) {
    .app-content {
        margin-top: 0;
    }
}

.app-toolbar .breadcrumb .breadcrumb-item,
.app-toolbar .breadcrumb .breadcrumb-item::before,
.app-toolbar .breadcrumb .breadcrumb-item::after {
    line-height: 1.35;
}

/* Cards float on the canvas with reference-style soft elevation. */
.card {
    box-shadow: 0 3px 10px rgba(34, 41, 47, 0.04);
}

[data-bs-theme="dark"] .card {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}