@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap&subset=latin-ext');


html[data-theme="light"],
:root {
    --primary: #155dfc;
    --secondary: #8c909a;
    --secondary-fg: #8c909a;
    --secondary-fg-2: #6b7084;
    --accent: #f5dd5d;
    --primary-fg: #000000;
    /* Yeni gelen satır vurgusu; alfa satır bazında ayarlandığı için ham RGB.
       Karar renkleri .score rozetlerinin paletiyle aynı tonlardan geliyor,
       tek fark kehribarın biraz koyultulması: rozette metin rengi olarak
       kullanılıyor, burada düşük alfalı zemin olduğu için #ffc658 beyaz
       üstünde neredeyse kayboluyordu. */
    --row-fresh-rgb: 21, 93, 252;
    --dec-accept-rgb: 14, 165, 232;
    --dec-review-rgb: 234, 168, 32;
    --dec-reject-rgb: 251, 66, 66;

    --logo: url('/static/img/truvali_kyc_aml_fraud_monitoring_logo.svg');
    --logo-opacity: 1;

    --body-fg: #333;
    --body-bg: #FFFFFF;
    --body-quiet-color: #8c909a;
    --body-medium-color: #444;
    --body-loud-color: #000;

    --widget-bg: #FFFFFF;

    --sidebar-bg: #FFFFFF;

    --header-color: #444;
    --header-branding-color: #222945;
    --header-bg: #FFFFFF;
    /*--header-bg: #FFFFFF;*/
    --header-link-color: #444;

    --timezone-bg: #f0f0f0;
    --timezone-fg: #444;


    --breadcrumbs-fg: #000000;
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: #1447e6;

    --link-fg-dark: #0a194e;
    --link-fg: #1447e6;
    --link-hover-color: #2b7fff;
    --link-selected-fg: var(--secondary);

    --hairline-color: #e8e8e8;
    --border-color: #00000022;
    --results-border-size: 1px;


    --error-fg: #ba2121;

    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --dark-bg: #FFFFFFAA;
    --darkened-bg: #FFFFFF11; /* A bit darker than --body-bg */
    --selected-bg: #e4e4e4; /* E.g. selected table cells */
    --selected-row: #ffc;

    --button-fg: #fff;
    --button-bg: #155dfc;
    --button-hover-bg: #2b7fff;
    --default-button-bg: #155dfc;
    --default-button-hover-bg: #2b7fff;

    --success-button-bg: #008526;
    --success-button-hover-bg: #0ea503;
    --success-button-fg: #ffffff;

    --close-button-fg: #FFFFFF;
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;

    --danger-border: #ba2121;
    --danger-bg: #ba2121;
    --danger-fg: #FFFFFF;

    --black-bg: #000000;
    --black-border: #000000;
    --black-fg: #FFFFFF;


    --table-tr-event-bg: #FFFFFF;
    --table-thead-th-bg: #f4f4f5;
    --table-tbody-hover-bg: #f4f4f5;
    --selected-bg: #f4f4f5;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);


    --sk-bg: #e9ecef11; /* temel arka plan */
    --sk-hi: #f5f6f811; /* parlak şerit */
    --sk-radius: 6px;
    --sk-height: 15px; /* satır içi yükseklik */
    --sk-speed: 1.2s;

    --gradiant-display: none;
    --color1: 18, 113, 255; /* Mavi */
    --color2: 107, 74, 255; /* Mor */
    --color3: 100, 220, 255; /* Açık Mavi */
    --interactive-color: 140, 100, 255;
    --circle-size: 80%;
    --blending: hard-light;


    --font-family-primary: Poppins, sans-serif;
    --font-family-monospace: ui-monospace,
    Menlo,
    Monaco,
    "Cascadia Mono",
    "Segoe UI Mono",
    "Roboto Mono",
    "Oxygen Mono",
    "Ubuntu Monospace",
    "Source Code Pro",
    "Fira Mono",
    "Droid Sans Mono",
    "Courier New",
    monospace,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #79aec8;
        --secondary: #8c909a;
        --secondary-fg: #8c909a;
        --secondary-fg-2: #6b7084;
        --accent: #f5dd5d;
        --primary-fg: #fff;
        --row-fresh-rgb: 96, 165, 250;
        --dec-accept-rgb: 56, 189, 248;
        --dec-review-rgb: 250, 204, 21;
        --dec-reject-rgb: 248, 113, 113;

        --body-fg: #333;
        --body-bg: linear-gradient(40deg, #080a0f, #1a1a2e);
        --body-quiet-color: #666;
        --body-medium-color: #444;
        --body-loud-color: #000;

        --sidebar-bg: #202947;

        --header-color: #ffc;
        --header-branding-color: #222945;
        --header-bg: #202947;
        /*--header-bg: #FFFFFF;*/
        --header-link-color: var(--primary-fg);

        --breadcrumbs-fg: #645bff;
        --breadcrumbs-link-fg: var(--body-bg);
        --breadcrumbs-bg: #264b5d;

        --link-fg-dark: #0a194e;
        --link-fg: #417893;
        --link-hover-color: #2b7fff;
        --link-selected-fg: var(--secondary);

        --hairline-color: #e8e8e8;
        --border-color: #ccc;

        --error-fg: #ba2121;

        --message-success-bg: #dfd;
        --message-warning-bg: #ffc;
        --message-error-bg: #ffefef;

        --dark-bg: #000000AA; /* A bit darker than --body-bg */
        --darkened-bg: #00000011; /* A bit darker than --body-bg */
        --selected-bg: #e4e4e4; /* E.g. selected table cells */
        --selected-row: #ffc;

        --button-fg: #fff;
        --button-bg: #202947;
        --button-hover-bg: #645bff;
        --default-button-bg: #645bff;
        --default-button-hover-bg: #7169dc;
        --close-button-bg: #747474;
        --close-button-hover-bg: #333;
        --delete-button-bg: #ba2121;
        --delete-button-hover-bg: #a41515;

        --object-tools-fg: var(--button-fg);
        --object-tools-bg: var(--close-button-bg);
        --object-tools-hover-bg: var(--close-button-hover-bg);


        --sk-bg: #e9ecef; /* temel arka plan */
        --sk-hi: #f5f6f8; /* parlak şerit */
        --sk-radius: 6px;
        --sk-height: 15px; /* satır içi yükseklik */
        --sk-speed: 1.2s;


        --font-family-primary: Poppins, sans-serif;
        --font-family-monospace: ui-monospace,
        Menlo,
        Monaco,
        "Cascadia Mono",
        "Segoe UI Mono",
        "Roboto Mono",
        "Oxygen Mono",
        "Ubuntu Monospace",
        "Source Code Pro",
        "Fira Mono",
        "Droid Sans Mono",
        "Courier New",
        monospace,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";

        color-scheme: dark;
    }
}


html[data-theme="dark"] {
    --primary: #79aec8;
    --row-fresh-rgb: 96, 165, 250;
    --dec-accept-rgb: 56, 189, 248;
    --dec-review-rgb: 250, 204, 21;
    --dec-reject-rgb: 248, 113, 113;
    --secondary: #8c909a;
    --secondary-fg: #8c909a;
    --secondary-fg-2: #6b7084;
    --accent: #f5dd5d;
    --primary-fg: #fff;

    --body-fg: #333;
    --body-bg: linear-gradient(40deg, #080a0f, #1a1a2e);
    --body-quiet-color: #666;
    --body-medium-color: #444;
    --body-loud-color: #000;

    --sidebar-bg: #202947;

    --header-color: #ffc;
    --header-branding-color: #222945;
    --header-bg: transparent;
    /*--header-bg: #FFFFFF;*/
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #645bff;
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: #264b5d;

    --link-fg: #417893;
    --link-hover-color: #036;
    --link-selected-fg: var(--secondary);

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: #ba2121;

    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --dark-bg: #000000AA;
    --darkened-bg: #00000011; /* A bit darker than --body-bg */
    --selected-bg: #e4e4e4; /* E.g. selected table cells */
    --selected-row: #ffc;

    --button-fg: #fff;
    --button-bg: #202947;
    --button-hover-bg: #645bff;
    --default-button-bg: #645bff;
    --default-button-hover-bg: #7169dc;
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);


    --sk-bg: #e9ecef; /* temel arka plan */
    --sk-hi: #f5f6f8; /* parlak şerit */
    --sk-radius: 6px;
    --sk-height: 15px; /* satır içi yükseklik */
    --sk-speed: 1.2s;


    --font-family-primary: Poppins, sans-serif;
    --font-family-monospace: ui-monospace,
    Menlo,
    Monaco,
    "Cascadia Mono",
    "Segoe UI Mono",
    "Roboto Mono",
    "Oxygen Mono",
    "Ubuntu Monospace",
    "Source Code Pro",
    "Fira Mono",
    "Droid Sans Mono",
    "Courier New",
    monospace,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";

    color-scheme: dark;
}

a:focus {
    text-decoration: none;
}

a:not(.addlink):not(.button):link, a:not(.addlink):not(.button):visited {
    color: var(--body-fg);
    text-decoration: none !important;
}


.closelink, .historylink, .networklink {
    color: #EEEDEF !important;
}

/* Ağ haritası kısayolu: metin + feather ikonu aynı satırda hizalansın. */
.object-tools a.networklink {
    display: flex !important;
    align-items: center;
    gap: 5px;
}

.object-tools a.networklink .feather {
    font-size: 13px;
    line-height: 1;
}

.paginator a:link, .paginator a:visited {
    background: #aeadbb;
    border-radius: 5px;
    color: #fff !important;

    min-width: 11px;
    display: block;
    text-align: center;
}

.object-tools {
    right: 45px;
    position: absolute;
    margin-top: -45px;
}

.paginator .this-page {
    background: var(--default-button-bg);
    color: #FFF;
    border-radius: 5px;
}

.paginator {
    border: none !important;
    padding-left: 15px;
}

nav:not(.paginator) {
    position: fixed;
    top: 10px;
}

nav.paginator ul > li {
    float: left;
    list-style: none;
    margin-right: 3px;
}

/* Pagination of the admin inlines (see lib.admin.PaginatedInlineMixin) */
.inline-paginator {
    padding: 10px 15px 0 15px;
    margin-top: 10px;
    border-top: 1px solid var(--hairline-color) !important;
    flex-wrap: wrap;
}

.inline-paginator ul {
    display: flex;
    align-items: center;
    padding: 0;
}

.inline-paginator .ellipsis {
    padding: 2px 4px;
    color: var(--body-quiet-color);
}

.inline-paginator .inline-paginator-count {
    margin-left: auto;
    color: var(--body-quiet-color);
}

.button.default, input[type=submit].default, .submit-row input.default {
    border: none;
    font-weight: 400;
    background: var(--breadcrumbs-fg);
}

.deletelink {
    color: #FFFFFF !important;
}

h1 {
    margin: 0 0 20px;
    font-weight: 500;
    font-size: 1rem;
    margin-top: 10px;
}

.link {
    color: var(--link-fg);
    text-decoration: underline;
}

.link:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Padding Left */
.pl-0 {
    padding-left: 0 !important;
}

.pl-1 {
    padding-left: 0.25rem;
}

.pl-2 {
    padding-left: 0.50rem !important;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-5 {
    padding-left: 1.25rem !important;
}

/* Padding Right */
.pr-0 {
    padding-right: 0;
}

.pr-1 {
    padding-right: 0.25rem;
}

.pr-2 {
    padding-right: 0.50rem;
}

.pr-3 {
    padding-right: 0.75rem !important;
}

.pr-4 {
    padding-right: 1rem !important;
}

.pr-5 {
    padding-right: 1.25rem;
}

/* Padding Top */
.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-2 {
    padding-top: 0.50rem;
}

.pt-3 {
    padding-top: 0.75rem !important;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

/* Padding Bottom */
.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-2 {
    padding-bottom: 0.50rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.50rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.ml-4 {
    margin-left: 1rem;
}

.ml-5 {
    margin-left: 1.25rem;
}

.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.50rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mr-5 {
    margin-right: 1.25rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.50rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-5 {
    margin-top: 1.25rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.50rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

#user-tools, #logout-form button {
    padding: 3px 10px;
    font-weight: inherit;
    font-size: 13px;
    letter-spacing: inherit;
    text-transform: unset !important;
    color: var(--body-fg);
}


#header {
    padding: 0px 15px;
    box-shadow: 0 0 2px #00000025;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--hairline-color);
}

#side-bar-wrapper ul.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;

}

#side-bar-wrapper .separator {
    display: block;
    height: 20px;
}


#side-bar-wrapper ul.nav-menu li {
    list-style: none;
    transition: color 0.15s, background 0.15s;
}

#side-bar-wrapper ul.nav-menu ul li a.left-menu-shortcuts {
    display: none;
}

#side-bar-wrapper ul.nav-menu ul li ul li:hover a.left-menu-shortcuts {
    display: inline-flex;
}

#side-bar-wrapper ul.nav-menu ul > li:hover > a, #side-bar-wrapper ul.nav-menu > li > ul > li.active > a {
    color: var(--link-fg);
}

#side-bar-wrapper ul.nav-menu > li > ul > li:hover > a, #side-bar-wrapper ul.nav-menu > li > ul > li.active > a {
    background: #00000010;
}

#side-bar-wrapper ul.nav-menu ul li a i {
    margin-right: 0.5rem;
    font-size: 18px;
}

#side-bar-wrapper ul.nav-menu li a > i {
    font-size: 20px;
    margin-right: 6px;
}

#side-bar-wrapper ul.nav-menu li a {
    color: var(--secondary-fg-2);
    display: inline-flex;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 600;
}

#side-bar-wrapper ul.nav-menu > li > ul > li > a > i {
    color: #a2a6b9;
}

#side-bar-wrapper ul.nav-menu > li > ul > li > ul {
    margin-top: 5px;
}

#side-bar-wrapper ul.nav-menu > li > ul > li:not(.active) > ul {
    display: none;
}

#side-bar-wrapper ul.nav-menu > li > ul > li > ul > li {
    display: inline-flex;
    width: 100%;
    padding-left: 24px;
    box-sizing: border-box;
}

#side-bar-wrapper ul.nav-menu > li > ul > li > ul > li > a > i {
    font-size: 14px;
}

#side-bar-wrapper ul.nav-menu > li > ul > li > ul > li > a:not(.left-menu-shortcuts):before {
    content: '';
    position: absolute;
    width: 1px;
    height: 32px;
    background: var(--hairline-color);
    margin-left: -15px;
    margin-top: -5px;
    margin-bottom: -5px;
}

#side-bar-wrapper ul.nav-menu > li > ul > li > ul > li > a {
    color: var(--body-fg);
    display: inline-flex;
    padding: 5px 15px;
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
    text-transform: capitalize;
    font-size: 12px;
    font-size: 12px;
}

#side-bar-wrapper ul.nav-menu > li > ul > li > a.has-submenu {
    width: calc(100% - 30px);
}

#side-bar-wrapper ul.nav-menu > li > ul > li > a.submenu {
    width: 30px;
    float: right;
    padding: 5px 10px;
}

#side-bar-wrapper ul.nav-menu > li > ul > li > a {
    color: var(--body-fg);
    display: inline-flex;
    padding: 5px 15px;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

#side-bar-wrapper ul.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#side-bar-wrapper {
    background: var(--sidebar-bg);
    width: 240px;
    min-width: 240px;
    border-right: 1px solid var(--hairline-color);
    top: 60px;
    height: calc(100vh - 60px);
    overflow-y: scroll;
    position: fixed;
    font-size: 14px;
}


.main > .content {
    flex: 1 0;
    max-width: 100%;
    padding-left: 240px;
    padding-top: 60px;
}

div.breadcrumbs a:focus, div.breadcrumbs a:hover {
    color: var(--primary-fg) !important;
}

div.breadcrumbs {
    background: transparent;
    padding: 10px 0 0 0;
    border: none;
    color: var(--breadcrumbs-fg);
    text-align: left;
}

div.breadcrumbs a {
    color: #5c67f7;
}

#branding {
    padding-top: 13px;
    border-right: 1px solid var(--border-color);
    width: 226px;
    height: 60px;
    box-sizing: border-box;
}

#branding h2 div {
    display: flex;
}

#branding h2 {
    padding: 0 0px;
    font-size: 22px;
    margin: -8px 0 8px 0;
    font-weight: 500;
    color: #ffffff;
}

#branding h2 i {
    margin-top: 6px;
    margin-right: 5px;
    font-size: 26px;
    color: #FFFFFF99;
}

/*#branding h2 span {*/
/*  display: block;*/
/*  font-size: 12px;*/
/*  font-weight: 300;*/
/*  padding-left: 32px;*/
/*  margin-top: -5px;*/
/*  color: #FFFFFF99;*/
/*}*/

.branding-logo {
    display: block;
    background: var(--logo);
    opacity: var(--logo-opacity);
    height: 50px;
    width: 155px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.module {
    border: none;
    margin-bottom: 30px;
    background: transparent;
}



.module h2, .module caption, .inline-group h2 {
    margin: 0 0 10px 0;
    padding: 0;
    font-weight: 500;
    font-size: 1rem;
    text-align: left;
    background: none;
    color: var(--primary-fg);
}

.calendar caption, .calendarbox h2{
    padding: 7px;
}

.search-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-container .item {
    width: 100%;
    box-sizing: border-box;
    height: 50px;
}

.search-container .result-count {
    flex-basis: 100%;
}

.search-container .item label {
    display: block;
    color: #000000;
    font-size: 12px;
}

.search-container .item input, .search-container .item select {
    width: 100%;
    box-sizing: border-box;
    font-size: 12px !important;
    padding: 5px !important;
    height: 31px !important;
}

.search-container button {
    height: 30px;
    /*margin-top: 18px;*/
    border-radius: 5px;
    border: 0;
    background: #006b1b;
    color: #FFF;
    padding: 5px 20px;
}

.inline-group .tabular tr.has_original td {
    padding-top: unset !important;
}

.inline-group .tabular td.original p {
    margin-top: -30px;
    display: None;
}

#changelist .paginator {
    background: none !important;
}

#changelist .actions {
    background: none !important;
}

#changelist-form {
    background: #FFFFFF !important;
    border-radius: 10px;
    box-shadow: 0 10px 15px #00000013;
    margin-bottom: 25px !important;
}

#changelist table thead th {
    border-bottom: 1px solid var(--border-color);
    border-top: 0;
    background: var(--table-thead-th-bg);
}

#changelist table tbody tr:hover th, #changelist table tbody tr:hover td {
    background: var(--table-tbody-hover-bg) !important;
}

#changelist table tbody tr:nth-child(even) {
    background: var(--table-tr-event-bg);
}

#changelist-form .results {
    max-width: calc(100vw - 242px);
    border: var(--results-border-size) solid var(--border-color);
    border-top: 0;
    border-radius: 0 0 15px 15px;
    box-sizing: border-box;
}

#content > h1 > p {
    font-size: 12px;
    color: var(--secondary-fg);
    font-weight: 400;
}

#content > h1 {
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px 15px 0 0;
    margin-bottom: 0;
    padding: 15px;
    box-sizing: border-box;
    color: var(--primary-fg);
}

body.popup .main > .content {
    padding-left: 0;
    padding-top: 0;
}
body.popup #content {
    position: relative;
    width: auto;
    overflow-y: auto;
    height: initial;
}

.empty-state-container > div > img {
    width: 210px;
}

.empty-state-container > div {
    display: flex;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state-container {
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-top: 0;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

fieldset.module h2 {
    background: none !important;
    border: 0;
    color: var(--primary-fg);
    font-weight: 500;
    font-size: 1rem;
}

fieldset.module {
    background: var(--widget-bg) !important;
    border-radius: 10px;
    box-shadow: 0 0px 4px #00000010;
    margin-bottom: 25px !important;
    color: var(--primary-fg);
    padding-bottom: 15px;
    border: 1px solid var(--border-color) !important;
}

.widget a i {
    font-size: 14px;
    position: absolute;
    margin-top: 4px;
}

.widget a {
    font-size: 12px;
    color: #6b7084;
}

.widget .values {
    display: flex;
    width: 100%;
}

.widget .values .chart-canvas {
    width: 100px;
    height: 35px;
    display: block;
    float: right;
    flex: 0 0 auto;
}

.widget .values .value {
    width: calc(100% - 100px);
    font-size: 22px;
    font-weight: 500;
    display: block;
    float: left;
    flex: 0 0 auto;
    line-height: 18px;
    margin-top: 10px;
}

.widget .values .value .change.up {
    color: #21ce9e;
}

.widget .values .value .change.down {
    color: #fb4242;
}

.widget .values .value .change {
    font-size: 12px;
    display: block;
}

.widget h2 {
    font-weight: 500;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 0;
}

.widget h3 {
    font-weight: 400;
    color: var(--secondary-fg-2);
    font-size: 13px;
    margin-top: 0;
}

.widget {
    background: var(--widget-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px #00000010;
    margin-bottom: 16px !important;
    box-sizing: border-box;
    padding: 15px;
    position: relative;
}

.widget .small-description {
    font-size: 11px;
    color: var(--secondary-fg);
    display: block;
}
.widget p {
    margin-bottom: px;
    color: var(--secondary-fg);
}

.widget table {
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
}


.widget tr:nth-child(odd), .widget .row-form-errors {
    background: transparent;
}

.widget thead th {
    background: transparent;
    color: var(--primary-fg);
    font-size: 13px;
}

.widget thead th, .widget tfoot td {
    border-top: none;
    padding: 5px 15px;
}

.widget td {
    padding: 10px 15px;
}

#content {
    padding: 20px 30px;
    position: fixed;
    width: calc(100% - 300px);
    overflow-y: scroll;
    height: calc(100vh - 145px);
}

#content-main {
    float: left;
}

.d-block {
    display: block !important;
}

.d-none {
    display: none !important;
}

.text-muted {
    font-size: 12px;
    color: var(--secondary-fg);
}

.widget td, .widget th {
    max-width: 200px;
}

td, th {
    font-size: 0.8rem;
    text-align: left; /* Yatayda sola hizalama */
    vertical-align: middle; /* Dikeyde ortalama */
    white-space: nowrap; /* Satır kırılmasını engelle */
    overflow: hidden; /* Taşan kısmı gizle */
    text-overflow: ellipsis; /* 3 nokta ile kesme */
    font-weight: 400;
}

.btn {
    font-size: 0.85rem;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    box-shadow: none;
    font-weight: 500;
    border: 1px solid;
}

.btn.btn-sm {
    padding: 0.26rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.btn.btn-lg {
    padding: 0.65rem 1rem;
    border-radius: 0.3rem;
    font-size: 0.95rem;
}

.btn-warning {
    background: #f59e00 !important;
    color: #000000 !important;
}

.btn-secondary {
    background: #e4e4e4 !important;
    color: #5e5e5e !important;
}


.btn-primary {
    background-color: var(--default-button-bg) !important;
    border-color: var(--default-button-bg) !important;
    color: #fff !important;
}

.btn-success {
    background-color: var(--success-button-bg) !important;
    border-color: var(--success-button-bg) !important;
    color: var(--success-button-fg) !important;
}

.btn-outline-success {
    background-color: transparent !important;
    border-color: var(--success-button-bg) !important;
    color: var(--success-button-bg) !important;
}

.btn-danger {
    background-color: var(--danger-bg) !important;
    border-color: var(--danger-border) !important;
    color: var(--danger-fg) !important;

}

.btn-link {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--link-fg) !important;
    text-decoration: underline;
}

.btn-dark {
    background-color: var(--black-bg) !important;
    border-color: var(--black-border) !important;
    color: var(--black-fg) !important;
}

.btn-modal i {
    font-size: 15px;
    margin-right: 10px;
}

.btn-modal {
    border-color: var(--default-button-bg) !important;
    color: var(--default-button-bg) !important;
    border-radius: 25px !important;
    font-size: 12px !important;
    display: inline-flex !important;
}

.btn-primary:hover {
    background-color: var(--default-button-hover-bg) !important;
    border-color: var(--default-button-hover-bg) !important;
    color: #fff;
}

.btn-outline-primary {
    color: var(--default-button-bg) !important;
    border-color: var(--default-button-bg) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--default-button-bg) !important;
    border-color: var(--default-button-bg) !important;
}

.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--default-button-bg) !important;
    border-color: var(--default-button-bg) !important;
    box-shadow: none !important;
}

.btn-outline-primary:focus:active {
    box-shadow: none !important;
}

.score.high {
    background-color: rgba(251, 66, 66, 0.1) !important;
    color: rgb(251, 66, 66) !important;
}

.score.mid {
    background-color: rgba(255, 198, 88, 0.1) !important;
    color: rgb(255, 198, 88) !important;
}

.score.low {
    background-color: rgba(14, 165, 232, 0.1) !important;
    color: rgb(14, 165, 232) !important;
}

.score {
    padding: 0.25rem 0.45rem;
    font-weight: 500;
    border-radius: 0.25rem;
    font-size: 11px;
}


.history-debug td, .history-debug th {
    background-color: rgba(14, 165, 232, 0.1) !important;
    color: rgb(24, 50, 61) !important;
}

.history-warning td, .history-warning th {
    background-color: rgba(255, 198, 88, 0.1) !important;
    color: rgb(93, 73, 34) !important;
}

.history-error td, .history-error th {
    background-color: rgba(251, 66, 66, 0.1) !important;
    color: rgb(108, 24, 24) !important;
}


:root {
    --g: 12px;
}

/* grid boşluğu */

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--g)) 0 calc(-1 * var(--g));
}

.row > .col {
    box-sizing: border-box;
    padding: 0 var(--g) 0 var(--g);
    flex: 0 0 auto; /* varsayılan: içerik kadar */
    min-width: 0; /* taşmayı önler */
    /*border: 1px solid #000000;*/
}

/* 12’lik kolon sistemi */
.col-1 {
    width: calc(100% * 1 / 12);
}

.col-2 {
    width: calc(100% * 2 / 12);
}

.col-3 {
    width: calc(100% * 3 / 12);
}

.col-4 {
    width: calc(100% * 4 / 12);
}

.col-5 {
    width: calc(100% * 5 / 12);
}

.col-6 {
    width: calc(100% * 6 / 12);
}

.col-7 {
    width: calc(100% * 7 / 12);
}

.col-8 {
    width: calc(100% * 8 / 12);
}

.col-9 {
    width: calc(100% * 9 / 12);
}

.col-10 {
    width: calc(100% * 10 / 12);
}

.col-11 {
    width: calc(100% * 11 / 12);
}

.col-12 {
    width: 100%;
}

/* Esneklik yardımcıları */
.col {
    flex: 1 1 0;
}

/* kalan alanı paylaşır */
.col-auto {
    width: auto;
}

/* içerik kadar */
.gap-0 {
    --g: 0px;
}

.gap-8 {
    --g: 8px;
}

.gap-16 {
    --g: 16px;
}

/* Hizalama yardımcıları (opsiyonel) */
.row.center {
    justify-content: center;
}

.row.between {
    justify-content: space-between;
}

.row.middle {
    align-items: center;
}


.pv-0 {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

.pv-1 {
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

.pv-2 {
    padding-bottom: 0.85rem !important;
    padding-top: 0.85rem !important;
}

.pv-3 {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
}

.pv-4 {
    padding-bottom: 1.25rem !important;
    padding-top: 1.25rem !important;
}

.pv-5 {
    padding-bottom: 1.5rem !important;
    padding-top: 1.5rem !important;
}

.ph-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ph-1 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}


.w-100 {
    width: 100%;
}

.w-auto {
    width: auto;
}

/* RULE PAGES */
.query-builder label {
    display: inline-block;
    max-width: 100%;
    min-width: 0 !important;
    width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btn-sm, .btn-group-sm > .btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.btn-xs, .btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.btn-group > .btn, .btn-group-vertical > .btn {
    position: relative;
    float: left
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    color: #fff !important;
    background-color: #286090 !important;
    border-color: #204d74 !important;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto
}

.pull-right {
    float: right !important
}

.pull-left {
    float: left !important
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0
}

.btn-group > .btn:first-child {
    margin-left: 0
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.btn-group > .btn-group {
    float: left
}

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: var(--body-fg);
    word-break: break-all;
    word-wrap: break-word;
    background-color: var(--widget-bg);
    border: 1px solid var(--hairline-color);
    border-radius: 4px;
}


.actions-editor-container .remove-action-btn {
    height: 30px;
    margin-left: 5px;
}

.actions-editor-container .action-value-container input, .actions-editor-container select {
    background: var(--selected-bg);
}

.actions-editor-container .form-row.dynamic-action-row:nth-last-child(2) {
    border-radius: 0 0 10px 10px;
}

.actions-editor-container .form-row.dynamic-action-row:first-child {
    border-radius: 10px 10px 0 0;
}


.query-builder .rules-list > *::before, .query-builder .rules-list > *::after {
    border-color: #696969 !important;
}

.json-query-builder-container .rule-actions .btn-danger {
    background: #dc3545 !important;
    height: 35px;
    font-weight: 600;
    color: #FFFFFF;
    margin-top: 0;
}

.json-query-builder-container .rule-container .rule-value-container label {
    float: right;
    width: auto;
}

.json-query-builder-container .rule-container .rule-value-container {
    width: 285px;
    border-color: var(--hairline-color) !important;
}

.json-query-builder-container .rule-container {
    min-width: 765px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: var(--selected-bg) !important;
    border: 1px dashed var(--hairline-color) !important;
}

.json-query-builder-container .rule-filter-container .form-control {
    width: 250px;
    font-size: 13px;
    height: 32px;
    border: 0;
    padding: 5px;
    background: var(--widget-bg);
}

.json-query-builder-container .rule-operator-container .form-control {
    font-size: 13px;
    height: 32px;
    border: 0;
    padding: 5px;
    background: var(--widget-bg);
}

.json-query-builder-container .rule-value-container .form-control {
    font-size: 13px;
    height: 32px;
    border: 0;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background: var(--widget-bg);
}

.json-query-builder-container .rules-group-container .rules-group-container {
    background: #007fb647 !important;
}

.json-query-builder-container .rules-group-container {
    background: var(--widget-bg) !important;
    border-color: var(--hairline-color) !important;
    border-radius: 7px !important;
    min-width: 500px;
}

.json-query-builder-container .group-conditions label.btn-primary {
    background: #acacac !important;
    color: #878686 !important;
    border: 0;
}

.json-query-builder-container .group-conditions label.btn-primary.active {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border: 0;
}

.json-query-builder-container .group-conditions label {
    height: 22px;
}

.json-query-builder-container .group-conditions {
    display: flex;
    width: 200px;
}


/* RULE PAGES END */


.change-form-col-3 div.form-row.field-topic_tags, .change-form-col-3 div.form-row.field-add_to_watchlist {
    padding: 7px 10px 6px 10px;
}

.change-form-col-3 div.form-row.field-topic_tags .readonly, .change-form-col-3 div.form-row.field-add_to_watchlist .readonly {
    display: flex;
}

.change-form-col-3 div.form-row .readonly {
    /*white-space: nowrap; !* Prevents text from wrapping to the next line *!*/
    overflow: hidden; /* Hides any content that overflows the element's box */
    text-overflow: ellipsis;
    font-weight: 600;
    margin-top: -6px;
}

.change-form-col-3 div.form-row label {
    min-width: 145px !important;
    width: 145px !important;
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden; /* Hides any content that overflows the element's box */
    text-overflow: ellipsis;
}

.change-form-col-3 div.form-row {
    width: 25% !important;
    float: left;
    box-sizing: border-box;
}

.change-form-col-3 p.datetime br {
    display: none;
}

.change-form-col-3 p.datetime .help {
    flex-basis: 100%;
}

.change-form-col-3 p.datetime {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    padding: 0 !important;
    font-size: 11px;
    line-height: 10px !important;
}

.change-form-col-3 p.datetime input {
    margin-bottom: 0 !important;
    height: 17px;
}

.change-form-col-3 .datetimeshortcuts .clock-icon, .change-form-col-3 .datetimeshortcuts .date-icon {
    height: 18px !important;
    width: 18px !important;
    background-size: 18px auto !important;
}

.change-form-col-3 .flex-container{
    display: unset !important;
}

.customer-profile-volumes div.form-row {
    width: 25% !important;
    float: left;
    box-sizing: border-box;
}

.customer-profile-volumes .form-row .flex-container label {
    width: 100% !important;
}

.customer-profile-volumes .form-row .flex-container {
    display: unset !important;
}

.change-form-col-raw .form-row {
    padding-top: 0 !important;
}

.change-form-col-raw .form-row .readonly {
    padding-top: 0 !important;
}

.change-form-col-raw .form-row label {
    display: none !important;
}


.change-form-col-custom .form-row {
    padding-top: 0 !important;
}

.change-form-col-custom .form-row .readonly {
    padding-top: 0 !important;
}

.change-form-col-custom .form-row label {
    display: none !important;
}

/* The panel is a permanent part of the case page now. It was hidden here
   because an object-tools link used to reveal it; that link is gone and the
   panel carries its own collapse control. */
.ai-report-module {
    padding-bottom: 14px;
}

.json-pretty {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--g)) 0 calc(-1 * var(--g));

}

.json-pretty > div {
    border-bottom: 1px solid var(--hairline-color);
}

.json-pretty span.label {
    display: block !important;
    width: 205px !important;
    padding: 15px 10px;
}

.json-pretty .value {
    padding: 15px 0 15px 0 !important;
    font-weight: 500;
    width: 100%
}


.filter-tools a {
    color: #4c4c4c;
    font-size: 13px;
    padding-left: 20px;
}

.filter-tools i {
    color: #5c67f7;
    font-size: 17px;
    margin-left: -20px;
    position: absolute;
}

.addlink.filter {
    background-image: none !important;
    padding-left: 40px !important;
    background: var(--primary) !important;
}

.addlink.filter i {
    font-size: 17px;
    margin-left: -20px !important;
    position: absolute;
}

#toolbar .wrapper {
    width: 300px !important;
    position: absolute;
    right: calc(50% - 200px);
    background: #FFFFFF;
    padding: 20px;
    border: 1px solid var(--border-color);
    margin-top: 50px;
    border-radius: 15px;
    box-shadow: ;
}

#toolbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #00000033 !important;
    backdrop-filter: blur(3px);
    width: 100vw;
    height: 100vh;
    z-index: 2;
    box-sizing: border-box;
    font-size: 0.775rem;

}

#filter-preset-desciption {
    display: none;
    border: 1px solid #00000010;
    border-radius: 10px;
    padding: 10px;
    position: absolute;
    background: #FFFFFF;
    box-shadow: 0 0 20px #00000025;
    margin-left: calc(50% - 400px);
    width: 290px;
}


.score-badge {
    /*border: 1px solid;*/
    border-color: #1b1b1b;
    border-radius: 25px;

    text-align: center;
    font-weight: 500;
    font-size: 11px;

    padding: 5px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
}

.score-badge i {
    font-size: 13px;
}

.score-badge i.bx-message-circle-exclamation {
    font-size: 15px !important;
}

.score-badge.low {
    background-color: rgb(61 130 197 / 20%);
    border-color: rgb(61 130 197 / 20%);
    color: rgb(61 130 197);
}

.score-badge.mid {
    background-color: rgba(255, 198, 88, 0.3);
    border-color: rgba(255, 198, 88, 0.5);
    color: rgb(197, 170, 61);
}

.score-badge.high {
    background-color: rgba(197, 61, 61, 0.2);
    border-color: rgba(197, 61, 61, 0.2);
    color: rgb(197, 41, 41);
}

.score-badge.critical {
    background-color: rgba(197, 61, 61, 0.2);
    border-color: rgba(197, 61, 61, 0.2);
    color: rgb(197, 41, 41);
}

.score-badge.success {
    background-color: rgba(84, 146, 24, 0.2);
    border-color: rgba(111, 197, 41, 0.2);
    color: rgb(74, 136, 24);
}

.score-badge.gray {
    background-color: rgba(84, 84, 84, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
    color: rgb(84, 84, 84);
}

.text-bold {
    font-weight: 500;
}

.fw-sbold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.column-amount_colored {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-credit {
    color: #e35f5f;
}

.text-debit {
    color: #006b1b;
}

@media (max-width: 575px) {
    .sm-12 {
        width: 100%;
    }

    .sm-6 {
        width: 50%;
    }

    .sm-4 {
        width: 33.333%;
    }

    .sm-3 {
        width: 25%;
    }
}

@media (max-width: 767px) {
    .md-6 {
        width: 50%;
    }

    .md-4 {
        width: 33.333%;
    }

    .md-3 {
        width: 25%;
    }
}

@media (max-width: 991px) {
    .lg-6 {
        width: 50%;
    }

    .lg-4 {
        width: 33.333%;
    }

    .lg-3 {
        width: 25%;
    }
}

@media (max-width: 1200px) {
    #customer_form div.form-row {
        width: 100% !important;
        float: none;
        box-sizing: border-box;
    }
}


.form-row.field-raw_response_design .readonly {
    width: 100%;
}

.form-row.field-reason_codes_viewer .readonly, .form-row.field-data_context_view .readonly {
    width: 100%;
}

.column-sanction_score__colored {
    text-align: center;
}

.change-list .column-status, .change-list .field-status, .change-list .column-decision__colored, .change-list .field-decision__colored, .change-list .column-score__colored, .change-list .field-score__colored, .change-list .column-get_event_from_cache, .change-list .field-get_event_from_cache {
    text-align: center;
}

/* ——— Yeni gelen kayıt vurgusu ———
   Eskiden tek satır sarıya boyanıp sönüyordu (highlightFade). İki sorunu
   vardı: sarı, skor rozetlerinin risk renkleriyle karışıyordu; ve vurgu tek
   bir satıra bağlı olduğu için yeni kayıt geldiği anda bir öncekininki
   sıfırlanıyor, hızlı akışta hiçbir şey "yeni" görünmüyordu.

   Artık en son birkaç kayıt tazelik SIRASINA göre işaretleniyor:
   data-fresh="0" en yenisi, sıra büyüdükçe vurgu soluyor. Böylece hızlı
   trafikte de son gelenlerin tamamı bir arada okunuyor. Renk mavi: risk
   paletiyle (yüksek/orta/düşük) çakışmıyor, "yeni" bilgisini taşıyor. */

tr.row-fresh > td {
    background-color: rgba(var(--row-fresh-rgb), var(--row-fresh-tint, 0));
    /* Sıra 0'dan 1'e düştüğünde animasyon kalkar ve geçişi bu üstlenir. */
    transition: background-color .28s ease, box-shadow .28s ease;
}

/* Vurgu kararın rengini alıyor: satır artık sadece "yeni" değil, ne kadar
   riskli olduğunu da renkten söylüyor. Karar okunamazsa yukarıdaki nötr
   --row-fresh-rgb devrede kalır. */
tr.row-fresh[data-decision="ACCEPT"] { --row-fresh-rgb: var(--dec-accept-rgb); }
tr.row-fresh[data-decision="REVIEW"] { --row-fresh-rgb: var(--dec-review-rgb); }
tr.row-fresh[data-decision="REJECT"] { --row-fresh-rgb: var(--dec-reject-rgb); }

/* Sol kenar şeridi satırın tamamına değil ilk hücreye veriliyor: tablo
   hücreleri box-shadow'u tek tek çizdiği için tr'ye verilen gölge
   border-collapse altında güvenilir görünmüyor. */
tr.row-fresh > td:first-child {
    box-shadow: inset 3px 0 0 0 rgba(var(--row-fresh-rgb), var(--row-fresh-bar, 0));
}

tr.row-fresh[data-fresh="0"] { --row-fresh-tint: .11;  --row-fresh-bar: 1; }
tr.row-fresh[data-fresh="1"] { --row-fresh-tint: .075; --row-fresh-bar: .62; }
tr.row-fresh[data-fresh="2"] { --row-fresh-tint: .05;  --row-fresh-bar: .40; }
tr.row-fresh[data-fresh="3"] { --row-fresh-tint: .03;  --row-fresh-bar: .24; }
tr.row-fresh[data-fresh="4"] { --row-fresh-tint: .018; --row-fresh-bar: .12; }

/* En yeni satır bir kez giriş animasyonu oynatır: parlak bir tondan kendi
   tonuna oturur. Sıra 1'e düşünce seçici eşleşmeyi bırakır, animasyon
   kalkar, yukarıdaki transition devralır. */
tr.row-fresh[data-fresh="0"] > td {
    animation: rowFreshIn .3s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes rowFreshIn {
    0% {
        opacity: 0;
        background-color: rgba(var(--row-fresh-rgb), .26);
    }
    35% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        background-color: rgba(var(--row-fresh-rgb), var(--row-fresh-tint));
    }
}

@media (prefers-reduced-motion: reduce) {
    tr.row-fresh > td {
        transition: none;
    }

    tr.row-fresh[data-fresh="0"] > td {
        animation: none;
    }
}


/* ——— Modal temel stiller ——— */
.jqm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    /* destroyModal opacity'yi 0'a çekip 140ms sonra siliyor; geçiş olmadan
       kapanış tak diye oluyordu. */
    opacity: 1;
    transition: opacity .18s ease;
}

.jqm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--body-bg);
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    animation: jqm-pop .16s ease-out;
}

.jqm-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--hairline-color);
    color: var(--body-fg);
}

.jqm-modal__title {
    font-size: 14px;
    font-weight: 600;
}

.jqm-modal__close {
    appearance: none;
    border: 0;
    background: transparent;
    color: #bbb;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
}

.jqm-modal__close:hover {
    color: var(--body-bg);
}

.jqm-modal__body {
    flex: 1 1 auto;
}

.jqm-modal__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--body-bg);
}

@keyframes jqm-pop {
    from {
        transform: translate(-50%, -48%) scale(.98);
        opacity: .85;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* İkinci, üçüncü modal açılırsa stack görünümü için ufak ofset (opsiyonel) */
.jqm-modal[data-stack-offset] {
    transform: translate(calc(-50% + var(--stack-x, 0px)), calc(-50% + var(--stack-y, 0px)));
}

/* Body scroll kilidi */
.jqm-body-locked {
    overflow: hidden;
}

/* ——— Sağdan açılan detay çekmecesi ———
   Modal ile aynı yaşam döngüsünü paylaşır (admin/base.html içindeki
   JQM.createDrawer), farkı: ortada büyümek yerine sağ kenara yapışıp kayarak
   gelir. Masaüstünde ana içeriğe sabit bir şerit bırakacak kadar geniş; dar
   ekranlarda önce oransal genişliğe, sonra tam ekrana düşüyor. */
.jqm-drawer {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: calc(100vw - 300px);
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    color: var(--body-fg);
    /* .jqm-modal'ın ortalama transform'u ve jqm-pop animasyonu burada geçersiz */
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    animation: none;
}

.jqm-drawer.is-open {
    transform: translateX(0);
}

@media (max-width: 1100px) {
    .jqm-drawer {
        width: 88vw;
    }
}

@media (max-width: 700px) {
    .jqm-drawer {
        width: 100vw;
    }
}

/* Çekmecedeki (ve modaldaki) iframe kendi viewport'u kadar dar sayıldığı için
   responsive.css'in `max-width: 1280px` tablet kırılımı içeride devreye girip
   `legend, label`'ı 0.8125rem'den 1rem'e çıkarıyordu — panel masaüstü
   penceresinin içinde olduğu halde yazılar büyük geliyordu. 700px üstündeki
   popup'larda forms.css'teki masaüstü değerine dönüyoruz; gerçekten küçük
   ekranda (çekmece tam ekran olduğunda) tablet büyütmesi yerinde kalıyor. */
@media (min-width: 701px) {
    body.popup legend,
    body.popup label {
        font-size: 0.8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jqm-drawer {
        transition: none;
    }
}

.jqm-drawer .jqm-modal__header {
    gap: 10px;
}

.jqm-drawer .jqm-modal__title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jqm-modal__expand {
    font-size: 12px;
    white-space: nowrap;
    color: var(--link-fg);
    text-decoration: none;
}

.jqm-modal__expand:hover {
    text-decoration: underline;
}

.jqm-drawer .jqm-modal__body {
    position: relative;
}

/* iframe yüklenene kadar dönen ince şerit */
.jqm-drawer__progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    overflow: hidden;
}

.jqm-drawer__progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--button-bg);
    animation: jqm-drawer-progress 1.1s ease-in-out infinite;
}

.jqm-drawer.is-loaded .jqm-drawer__progress {
    display: none;
}

@keyframes jqm-drawer-progress {
    from {
        transform: translateX(-100%) scaleX(.4);
    }
    to {
        transform: translateX(100%) scaleX(.4);
    }
}

/* Drawer açan tablo satırları */
tr.drawer-row {
    cursor: pointer;
}

tr.drawer-row:hover > td {
    background: var(--table-tbody-hover-bg);
}

tr.drawer-row:focus-visible {
    outline: 2px solid var(--button-bg);
    outline-offset: -2px;
}


.timezone-select,
.language-select {
    background: var(--timezone-bg);
    color: var(--timezone-fg);
    border-radius: 5px;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 3px #00000022;
    width: 170px;
    padding: 0px 5px;
    font-size: 12px;
    height: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

/* Narrower than the timezone list: only a handful of short language names. */
.language-select {
    width: 100px;
    margin-left: 0;
}

select.timezone-select option,
select.language-select option {
    background-color: #fff;
    color: #000;
}

.web-socket-status.connected i {
    color: #006b1b;
}

.web-socket-status.connecting i {
    color: #b87f00;
}

.web-socket-status.connecting {
    color: #b87f0050;
}

.web-socket-status.disconnected i {
    color: #c80000;
}

.web-socket-status.disconnected {
    color: #c8000050;
}

.web-socket-status i {
    font-size: 16px;
    position: absolute;
    margin-top: 2px;
    margin-left: -20px;
}

.web-socket-status {
    color: #006b1b80;
    font-size: 12px;
    position: fixed;
    bottom: 0px;
    padding-left: 35px;
    width: calc(100% - 240px);
    box-sizing: border-box;
    background: var(--widget-bg);
    border-top: 1px solid var(--hairline-color);
    margin-left: -29px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

/* ---- SKELETON ---- */
.skeleton-row td {
    position: relative;
    vertical-align: middle;
}

.skeleton-row td .skeleton-bar:last-child {
    margin-top: 3px;
}

/* Hücre içi “bar” */
.skeleton-bar {
    display: block;
    width: 100%;
    height: var(--sk-height);
    border-radius: var(--sk-radius);
    background: linear-gradient(
            90deg,
            var(--sk-bg) 0%,
            var(--sk-hi) 20%,
            var(--sk-bg) 40%
    );
    background-size: 200% 100%;
    animation: sk-shimmer var(--sk-speed) ease-in-out infinite;
}

/* Farklı genişlik varyasyonları (daha gerçekçi görünüm) */
.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-70 {
    width: 70%;
}

.w-75 {
    width: 70%;
}

.w-100 {
    width: 100%;
}

/* Yuvarlak avatar/ikon iskeleti örneği */
.skeleton-dot {
    height: var(--sk-height);
    border-radius: 10px;
    background: linear-gradient(
            90deg,
            var(--sk-bg) 0%,
            var(--sk-hi) 20%,
            var(--sk-bg) 40%
    );
    background-size: 200% 100%;
    animation: sk-shimmer var(--sk-speed) ease-in-out infinite;
}

@keyframes sk-shimmer {
    0% {
        background-position: 200% 0;
        opacity: .85;
    }
    50% {
        opacity: 1;
    }
    100% {
        background-position: -200% 0;
        opacity: .85;
    }
}

/* Hareketten rahatsız olan kullanıcılar için animasyonu kapat */
@media (prefers-reduced-motion: reduce) {
    .skeleton-bar, .skeleton-dot {
        animation: none;
    }
}


.tag i {
    margin-right: 5px;
    font-size: 15px;
}

.tag {
    display: flex;
    font-size: 13px;
    margin-right: 15px;

}

.tag.high i {
    color: #C00;
}

.tag.medium i {
    color: rgb(227, 148, 0);
}

.tag.low i {
    color: rgb(88, 155, 255);
}

.tag.critical i {
    color: #C00;
}

#simple-tooltip ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#simple-tooltip li {
    list-style: none;
    margin: 0;
    padding: 0 5px 0 0;
}

#simple-tooltip h2 {
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #00000020;
    padding-bottom: 5px;
}

#simple-tooltip h1 {
    margin-bottom: 5px;
}

#simple-tooltip {
    border-radius: 15px;
    box-shadow: 0 0 20px #00000035;
    background: #FFFFFF;
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto;
}

.calendar-wrapper {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 20px 30px 30px 30px;
    display: inline-block;
}

.calendar-title {
    margin-bottom: 8px;
    font-weight: 600;
}

.calendar-months {
    display: flex;
    margin-bottom: 4px;
    font-size: 12px;
    color: #555;
}

.calendar-months span {
    flex: 1;
    text-align: left;
}

.calendar-main-row {
    display: flex;
}

.calendar-day-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 6px;
    font-size: 10px;
    color: #555;
    height: 7 *15px;
}

.calendar-grid {
    display: flex;
    gap: 3px;
}

.calendar-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.calendar-day {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: #ebedf0;
}

.calendar-level-0 {
    background: #ebedf0 !important;
}

.calendar-level-1 {
    background: #c6e48b !important;
}

.calendar-level-2 {
    background: #7bc96f !important;
}

.calendar-level-3 {
    background: #239a3b !important;
}

.calendar-level-4 {
    background: #196127 !important;
}

.calendar-legend {
    margin-top: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-legend-box {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #ebedf0;
}

/* Checkbox gizlenir */
.formula-toggle-input {
    display: none;
}

/* Asıl görünen buton */
.formula-toggle-ui {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;

    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 6px;

    font-family: "SF Mono", monospace;
    font-size: 18px;
    color: #666;

    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Hover efekti */
.formula-toggle-ui:hover {
    background: #eee;
    border-color: #999;
}

/* CHECKED: aktif görünüm */
.formula-toggle-input:checked + .formula-toggle-ui {
    background: #2d5cf6; /* Mavi arka plan */
    border-color: #2d5cf6;
    color: white;

    box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.25);
}

/* Basınca küçülme efekti */
.formula-toggle-ui:active {
    transform: scale(0.95);
}


.formula-input-wrapper {
    position: relative;
    display: inline-block;
    width: 235px;
}

/* contenteditable editor */
.formula-input-editor {
    padding: 5px 5px;
    font-size: 13px;
    border: 1px solid var(--hairline-color);
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
    cursor: text;
    white-space: nowrap;
    overflow-x: auto;
    background: var(--selected-bg);
    margin-top: 3px;
}

/* Placeholder */
.formula-input-editor:empty:before {
    content: attr(data-placeholder);
    color: #999;
    pointer-events: none;
}

/* Focus state */
.formula-input-editor:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* Error state */
.formula-input-editor--error {
    border-color: #e53935 !important;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.15) !important;
}

/* Inline token pill */
.formula-input-token {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: 999px;
    background: #f3f6ff;
    border: 1px solid #d2dbff;
    font-size: 11px;
    color: #2b3a67;
    white-space: nowrap;
    vertical-align: middle;
}

.formula-input-token[contenteditable="false"] {
    -webkit-user-select: none;
    user-select: none;
}

.formula-input-token-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4a90e2;
    margin-right: 5px;
}

/* Dropdown */
.formula-input-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccd0d5;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    overflow-y: auto;
    z-index: 10000;
    font-size: 13px;
}

.formula-input-dropdown--hidden {
    display: none;
}

.formula-input-dropdown-item {
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s ease, color 0.12s ease;
}

.formula-input-dropdown-item:hover {
    background: #eef2ff;
}

.formula-input-dropdown-item--active {
    background: #2d5cf6;
    color: #fff;
}

/* Alt taraftaki pill listesi */
.formula-input-pills {
    margin-top: 6px;
    display: none;
    flex-wrap: wrap;
    gap: 6px;
}

.formula-input-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f3f6ff;
    border: 1px solid #d2dbff;
    font-size: 11px;
    color: #2b3a67;
    line-height: 1.4;
}

.formula-input-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4a90e2;
    margin-right: 5px;
}

.formula-input-pill-label {
    white-space: nowrap;
}

/* Hata mesajı */
.formula-input-error {
    margin-top: 4px;
    font-size: 11px;
    color: #e53935;
    display: none;
}


*::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
}


/*#changelist table {*/
/*  border-collapse: separate;*/
/*  border-spacing: 0 5px;*/
/*}*/

/*tr:nth-child(odd) {*/
/*  background: #FFFFFF;*/
/*}*/

/*tr:nth-child(odd) td:first-child, tr:nth-child(odd) th:first-child {*/
/*  border-top-left-radius: 10px;*/
/*  border-bottom-left-radius: 10px;*/
/*}*/

/*tr:nth-child(odd) td:last-child, tr:nth-child(odd) th:last-child {*/
/*  border-top-right-radius: 10px;*/
/*  border-bottom-right-radius: 10px;*/
/*}*/

/*tr:nth-child(even) {*/
/*  background: #FFFFFF;*/
/*}*/

/*tr:nth-child(even) td:first-child, tr:nth-child(even) th:first-child {*/
/*  border-top-left-radius: 10px;*/
/*  border-bottom-left-radius: 10px;*/
/*}*/

/*tr:nth-child(even) td:last-child, tr:nth-child(even) th:last-child {*/
/*  border-top-right-radius: 10px;*/
/*  border-bottom-right-radius: 10px;*/
/*}*/

#changelist-form {
    background: transparent !important;
    border-radius: 10px;
    box-shadow: unset !important;
    margin-bottom: 25px !important;
    max-width: calc(100vw - 245px);
    width: 100%;
}

.field-get_id_link div:not(.avatar) {
    margin-top: 5px;
}

.field-get_id_link div.avatar {
    background: #aeadbb;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 7px 9px 9px 8px;
    float: left;
    margin-right: 15px;
    box-sizing: border-box;
}

.field-get_id_link img {
    width: 100%;
    filter: invert(1);
    margin-left: 1px;
    margin-top: 1px;
}


.click_to_copy, .field-id .readonly {
    position: relative;
    cursor: pointer;
    overflow: unset !important;
}

.click_to_copy::after, .field-id .readonly::after {
    content: "";
    position: absolute;
    margin-left: 2px;
    top: 50%;
    width: 12px;
    height: 13px;
    transform: translateY(-50%);
    display: inline-block;

    opacity: .5;
    background-repeat: no-repeat;
    background-size: contain;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H10c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m0 12H10V4h10z'/%3E%3Cpath d='M14 20H4V10h2V8H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-2h-2z'/%3E%3C/svg%3E");
}

.click_to_copy::after, .field-id .readonly::after {
    transition: transform .2s ease, opacity .2s ease;
}

.click_to_copy.copied::after, .field-id .readonly.copied::after {
    transform: translateY(-50%) scale(1.3);
    opacity: 1;
}

.click_to_copy.copied::before, .field-id .readonly.copied::before {
    content: "Copied!";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background: #333;
    color: #fff;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 4px;
    opacity: 0;
    animation: fadePop 1s forwards;
}

.field-decision__colored, .field-get_event_from_cache {
    overflow: unset !important;
    width: 125px;
}

.color-F8BBD0 {
    background-color: #F8BBD0;
    color: #91455e;
}

.color-F48FB1 {
    background-color: #F48FB1;
    color: #91455e;
}

.color-CE93D8 {
    background-color: #CE93D8;
    color: #673977;
}

.color-B39DDB {
    background-color: #B39DDB;
    color: #673977;
}

.color-9FA8DA {
    background-color: #9FA8DA;
    color: #31566e;
}

.color-90CAF9 {
    background-color: #90CAF9;
    color: #32628c;
}

.color-81D4FA {
    background-color: #81D4FA;
    color: #32628c;
}

.color-80DEEA {
    background-color: #80DEEA;
    color: #32628c;
}

.color-80CBC4 {
    background-color: #80CBC4;
    color: #32628c;
}

.color-A5D6A7 {
    background-color: #A5D6A7;
    color: #356a37;
}

.color-C5E1A5 {
    background-color: #C5E1A5;
    color: #617e39;
}

.color-E6EE9C {
    background-color: #E6EE9C;
    color: #676c2a;
}

.color-FFF59D {
    background-color: #FFF59D;
    color: #676c2a;
}

.color-FFE082 {
    background-color: #FFE082;
    color: #676c2a;
}

.color-FFCC80 {
    background-color: #FFCC80;
    color: #816236;
}

.color-FFAB91 {
    background-color: #FFAB91;
    color: #816236;
}

.color-B0BEC5 {
    background-color: #B0BEC5;
    color: #3d667a;
}

.color-CFD8DC {
    background-color: #CFD8DC;
    color: #3d667a;
}

.color-D7CCC8 {
    background-color: #D7CCC8;
    color: #835943;
}

.color-F0F4C3 {
    background-color: #F0F4C3;
    color: #838848;
}

.color-CCCCCC {
    background-color: #CCCCCC;
    color: #737373;
}

.score-dropdown {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
}

.score-badge .arrow {
    width: 14px;
    height: 14px;
    fill: #355e1f;
    transition: transform 0.2s ease;
}

.dropdown-menu p {
    white-space: normal;
    color: #999999;
    padding-top: 10px;
    text-align: left;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 12px;
    margin-top: 8px;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: none;
    width: 200px;
    z-index: 1;
}

.dropdown-item {
    padding: 10px 10px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    border-top: 1px solid #cccccc44;
}

.dropdown-menu p a {
    margin-top: 5px;
    display: block;
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
    color: #5c67f7 !important;
}

.dropdown-item i {
    margin-right: 5px;
    font-size: 18px;
}

.dropdown-item.accept i {
    color: #006b1b;
}

.dropdown-item.review i {
    color: #f59e00;
}

.dropdown-item.reject i {
    color: #CC0000;
}

.dropdown-item:hover {
    background: #f1f1f1;
}

.score-dropdown.open .dropdown-menu {
    display: block;
}

.score-dropdown.open .arrow {
    transform: rotate(180deg);
}

@keyframes fadePop {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
}


#page-loader {
    position: fixed;
    inset: 0;
    background: rgb(109 119 123 / 65%);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    display: none;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

#page-loader.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

#page-loader-video {
    width: 150px;
    height: 150px;
}

.json-viewer ul li div {
    font-weight: 500;
    width: 155px;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.json-viewer ul li.mt-3 > div {
    font-size: 16px;
    margin-top: 25px;
    width: 100%;
}

.json-viewer ul li {
    padding-bottom: 0;
    min-height: 25px;
}

.json-viewer ul li:not(:last-child) {
    display: block;
    clear: both;
    border-bottom: 1px solid #0002;
}

.json-viewer ul {
    margin-left: 0 !important;
    padding-left: 0 !important;
}


.table-wrap {
    width: 100%;
    max-width: calc(100vw - 240px);
    overflow-x: auto; /* yatay scroll */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-wrap-full {
    width: 100%;
    overflow-x: auto; /* yatay scroll */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Tablo genişleyebilsin */
.sticky-first-col {
    border-collapse: separate; /* sticky için genelde daha stabil */
    border-spacing: 0;
    min-width: 100%; /* en az container kadar */
    width: max-content; /* içerik büyüdükçe 100% üstüne çıkabilsin */
}

/* Hücre temel stil */
.sticky-first-col th,
.sticky-first-col td {
    padding: 10px 12px;
    white-space: nowrap; /* yatayda uzasın, satır kırmasın */
}

/* İlk sütunu sabitle */
.sticky-first-col th:first-child,
.sticky-first-col td:first-child {
    position: sticky;
    left: 0;
    z-index: 2; /* diğer hücrelerin üstünde dursun */
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.08); /* ayırıcı çizgi hissi */
}

/* Header’ı da sticky yapmak istersen (opsiyonel) */
.sticky-first-col thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Header'da ilk hücre hem top hem left sticky olduğu için en üstte olsun */
.sticky-first-col thead th:first-child {
    z-index: 4;
}

.vDateField {
    min-width: 85px;
}

#group_form #id_permissions {
    width: 100%;
}

#group_form #id_permissions > div {
    width: 100%;
    display: flex;
}


.login .form-row #id_otp_token {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;

    text-align: center;

    letter-spacing: 12px; /* aralık hissi */
    padding-left: 12px; /* caret ortalama */
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}


.json-wrap {
    display: flex;
    gap: 20px;
}

.json-wrap h2 {
    margin: 12px 4px 8px;
    font-size: 16px;
    line-height: 1.2
}

.kv {
    width: 100%;
    border-collapse: collapse;
    margin: .25rem 0
}

.kv th, .kv td {
    background: #FFFFFF;
    border-bottom: 1px solid #e5e7eb;
    padding: .35rem .5rem;
    vertical-align: top;
    font-size: 12px;
    line-height: 1.35
}

.kv th {
    white-space: nowrap;
    color: #111827;
    font-weight: 600
}

.kv table {
    margin: 0;
    border: 0
}

.kv code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
}

.kv code.null {
    color: #6b7280
}

.kv code.bool {
    color: #2563eb
}

.kv code.val {
    color: #111827
}

.json-sep {
    height: 8px
}

.json-sec {
    width: 33%
}

.kv td span {
    /*max-width: 160px;*/
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/*body:not(.popup) .main > .content {*/
/*    overflow: hidden;*/
/*    overflow-y: scroll;*/
/*    height: calc(100vh - 70px);*/
/*}*/
/*#content{*/
/*    height: 100%;*/
/*}*/
/*#content-main{*/
/*    height: 100%;*/
/*}*/
/*#changelist{*/
/*    height: 100%;*/
/*}*/
/*#changelist-form{*/
/*    height: 100%;*/
/*}*/
/*#changelist-form .results{*/
/*    height: 100%;*/
/*}*/
/*#changelist .changelist-form-container{*/
/*    height: 100%;*/
/*}*/

#changelist .changelist-form-container {
    flex-wrap: wrap;
}

.customer-transaction-filters label span {
    display: block;
}

.customer-transaction-filters label {
    text-transform: capitalize;
    min-width: unset !important;
    width: unset !important;
    font-size: 11px;
}

.customer-transaction-filters {
    display: flex;
    gap: 10px;
}



.biometric-photo-fieldset > div.form-row.field-biometric_photo{
    width: 200px !important;
    border-bottom: 0;
}
.biometric-photo-fieldset > div.form-row{
    width: calc(33.333333% - 120px) !important;
}
.biometric-photo-fieldset > div.form-row.field-biometric_photo > div > div > label{
    display: none;
}
.biometric-photo-fieldset .form-row img{
    width: 160px;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--hairline-color);
}


.deletion-confirmation-container{
    border: 1px solid var(--border-color);
    padding: 15px;
}

.ai-prompt-box img{
    width: 270px;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
}
.ai-prompt-box {
    padding: 30px;
    background: var(--widget-bg);
    border:1px solid var(--border-color);
    border-top: 0;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.ai-textarea {
    box-sizing: border-box;
    width: 100%;
    height: 160px;
    padding: 15px;
    font-size: 14px;
    border: 1px solid var(--hairline-color);
    border-radius: 6px;
    margin-bottom: 20px;
    resize: vertical;
    font-family: inherit;
}

.ai-textarea:focus {
    border-color: #79aec8;
    outline: none;
}

.btn-ai {
    background: var(--primary);
    color: white;
    padding: 8px 24px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.btn-ai:hover {
    background: var(--button-hover-bg);
}

.btn-manual {
    background: var(--black-bg);
    color: var(--black-fg) !important;
    padding: 5px 24px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid var(--black-border);
}

.btn-manual:hover {
    background: var(--black-bg);
}

.ai-guidance {
    background: var(--table-tbody-hover-bg);
    border-left: 4px solid var(--primary);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: var(--body-fg);
}

.ai-examples {
    background: var(--table-tbody-hover-bg);
    border: 1px solid var(--hairline-color);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}

.ai-examples ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.ai-examples li {
    margin-bottom: 8px;
    font-style: italic;
}


.select2-container--default .select2-results > .select2-results__options{
    background: var(--body-bg) !important;
}
.select2-results__option[aria-selected]{
    background: var(--body-bg) !important;
    color: var(--body-fg) !important;
}
.select2-container--default .select2-results__option[aria-selected=true]{
    background: var(--widget-bg) !important;
    color: var(--body-fg) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background: var(--secondary-fg) !important;
    color: var(--body-fg) !important;
}
.select2-container--open .select2-dropdown--below{
    border-color: var(--hairline-color) !important;
}
.select2-dropdown{
    background: var(--body-bg) !important;
}


span.select2-selection li:not(.select2-search){
    padding-left: 20px !important;
    background: var(--widget-bg) !important;
    color: var(--body-fg) !important;
}
span.select2-selection{
    background: var(--widget-bg) !important;
    border: 1px solid var(--hairline-color) !important;
    border-radius: 5px !important;
}

.report-preview .report-description{
    border: 1px solid var(--border-color);
    padding: 15px;
    background: var(--widget-bg);
}

input[type=date] {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 6px;
    margin-top: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}


.gradient-bg {
    display: var(--gradiant-display, block);
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(40deg, #080a0f, #0d0d1c);
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.1;
}

.gradients-container {
    filter: blur(40px); /* Renkleri yumuşatır */
    width: 100%;
    height: 100%;
}

.g1, .g2, .g3, .interactive {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    opacity: 1;
}

/* Otomatik Hareket Animasyonları */
.g1 {
    animation: moveVertical 30s ease infinite;
}

.g2 {
    background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
    transform-origin: calc(50% - 400px);
    animation: moveInCircle 20s reverse infinite;
}

.g3 {
    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
    top: calc(50% - var(--circle-size) / 2 + 200px);
    left: calc(50% - var(--circle-size) / 2 - 500px);
    animation: moveInCircle 40s linear infinite;
}

/* Fare Takip Eden İnteraktif Top */
.interactive {
    background: radial-gradient(circle at center, rgba(var(--interactive-color), 0.8) 0, rgba(var(--interactive-color), 0) 50%) no-repeat;
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    opacity: 0.7;
}

@keyframes moveInCircle {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes moveVertical {
    0% {
        transform: translateY(-50%);
    }
    50% {
        transform: translateY(50%);
    }
    100% {
        transform: translateY(-50%);
    }
}

/* A badge inside a readonly value must shrink-wrap and stay the height of a
   plain text value: .score-badge is display:flex with 5px vertical padding, so
   untouched it stretches across the cell and makes the row 7px taller than its
   neighbours — which, in the floated 4-column layout, drags the row's
   border-bottom out of line. */
.form-row .readonly .score-badge {
    display: inline-flex;
    padding-top: 1px;
    padding-bottom: 1px;
}

/* forms.css offsets help text by 160px to clear the label column. A help line
   rendered inside a readonly value already starts past that column, so it must
   not take the offset a second time. */
form .aligned .readonly div.help {
    margin-left: 0;
}

/* Alerts inline: score and decision read as one unit — stacked, same width,
   small gap, and no thicker than the surrounding table text. */
.alert-chips {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
}

.alert-chips .score-badge {
    width: 88px;
    padding-top: 1px;
    padding-bottom: 1px;
}

/* Alarm chips inside the customer transactions table — inline so several fit
   on one line, and no taller than the row's secondary text. */
.event-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.event-alerts .score-badge {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* The rationale is the case's decision record, not an afterthought: it gets the
   width of the fieldset instead of the browser's default 40-column textarea,
   which rendered narrower than the status dropdown above it. */
.field-rationale textarea.case-rationale {
    width: 100%;
    max-width: 760px;
    resize: vertical;
}

/* ---- AI assistant panel ------------------------------------------------- */
/* Always on the page, directly above Status Management: it is the context for
   the decision taken there. Collapsed state is the investigator's choice and is
   remembered, so a long report never buries the fields underneath it. */

/* The readonly field wrapper shrinks to its content, which leaves the header
   rule hanging in mid-air whenever the body below it is collapsed. */
.ai-report-module .flex-container,
.ai-report-module .readonly,
.ai-report-panel {
    width: 100%;
}

/* Everything in this panel lines up on the same left and right edge as the
   fieldsets around it. Two paddings sat in the way: the form row's own, and
   the report widget's, which between them pushed each block to a different
   offset (271 / 281 / 300 / 308). */
.ai-report-module .form-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ai-report-panel .ai-report-container {
    padding-left: 0;
    padding-right: 0;
}

.ai-report-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid var(--hairline-color);
}

/* Takes the free space so the score and the toggle stay pinned right. */
.ai-report-heading {
    flex: 1;
    min-width: 0;
}

.ai-report-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--selected-bg);
    color: var(--link-fg);
    flex: none;

}

.ai-report-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--body-fg);
}

/* Only carries the closed panel: open, the body below says all of this and
   more, and a standing subtitle would just be noise above it. */
.ai-report-summary {
    display: none;
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--body-quiet-color);
}

.ai-report-panel.is-collapsed .ai-report-summary {
    display: block;
}

.ai-report-score {
    flex: none;
}

.ai-report-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--hairline-color);
    border-radius: 6px;
    background: transparent;
    color: var(--body-quiet-color);
    font-size: 12px;
    cursor: pointer;
}

.ai-report-toggle:hover {
    color: var(--body-fg);
    border-color: var(--body-quiet-color);
}

.ai-report-chevron {
    transition: transform 0.15s ease;
}

.ai-report-toggle[aria-expanded="false"] .ai-report-chevron {
    transform: rotate(-90deg);
}

.ai-report-body {
    padding: 0 15px;
}

.ai-report-body[hidden] {
    display: none;
}

/* Collapsed, the header is the whole component: no rule under it, nothing
   underneath it to separate from. */
.ai-report-panel.is-collapsed .ai-report-header {
    align-items: flex-start;
    padding-bottom: 2px;
    border-bottom: none;
}

.ai-report-panel.is-collapsed .ai-report-score,
.ai-report-panel.is-collapsed .ai-report-toggle {
    margin-top: 2px;
}

.ai-report-intro {
    padding: 5px 15px;
    max-width: 780px;

}

.ai-report-lead {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--body-fg);
}

.ai-report-sub {
    margin: 0 0 16px;
    color: var(--body-quiet-color);
    line-height: 1.55;
}

/* The admin indents lists inside aligned forms by 160px and strips their
   markers; neither is wanted for prose lists that are not form rows. */
.ai-report-capabilities,
.ai-report-notice ul {
    margin: 0 !important;
    padding-left: 20px !important;
}

.ai-report-capabilities li,
.ai-report-notice li {
    list-style: disc outside !important;
}

.ai-report-capabilities {
    color: var(--body-fg);
}

.ai-report-capabilities li {
    margin-bottom: 6px;
    line-height: 1.5;
}

/* Deliberately quiet rather than alarming: it must be read once and stay
   readable, not shout over the report it sits under. */
.ai-report-notice {
    padding: 11px 14px;
    border: 1px solid var(--hairline-color);
    border-left: 3px solid var(--body-quiet-color);
    border-radius: 6px;
    background: var(--selected-bg);
}

.ai-report-notice-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--body-quiet-color);
    margin-bottom: 5px;
}

.ai-report-notice li {
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--body-quiet-color);
}

.ai-report-notice li:last-child {
    margin-bottom: 0;
}

.ai-report-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 15px 0 0 0 !important;
}

/* The shared .button rule collapses to a 2px pill in this form context. */
.ai-report-run {
    display: inline-block !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}

.ai-report-run[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.ai-report-error {
    margin: 15px 0 0 15px !important;
    padding: 10px 14px !important;
    border-radius: 6px;
    background: var(--selected-bg);
    color: var(--error-fg, #ba2121);
}

#verificationflow_form #id_checklist label{
    width: unset !important;
}

/* Two datetime boxes have to share the filter column's width; left at their
   natural 300px they overflow the panel and land on the next filter. */
.filter-datetime-range {
    display: flex;
    gap: 8px;
}

.filter-datetime-range input {
    width: 100% !important;
    min-width: 0;
}

/* ==========================================================================
   ÜST BAR KULLANICI MENÜSÜ + MOBİL EŞLEŞTİRME QR'I
   ========================================================================== */

/* Açılır panel ve modal, sayfanın üstünde yüzen yüzeyler: --widget-bg dark
   temada yarı saydam olduğu için altındaki içerik okunur kalıyordu; bu iki
   bileşene opak bir zemin gerekiyor. */
:root {
    --float-surface-bg: #ffffff;
    --float-surface-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    --float-surface-hover: #f4f4f5;
}

@media (prefers-color-scheme: dark) {
    :root {
        --float-surface-bg: #12141f;
        --float-surface-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
        --float-surface-hover: #ffffff14;
    }
}

html[data-theme="light"] {
    --float-surface-bg: #ffffff;
    --float-surface-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    --float-surface-hover: #f4f4f5;
}

html[data-theme="dark"] {
    --float-surface-bg: #12141f;
    --float-surface-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    --float-surface-hover: #ffffff14;
}

#user-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-menu {
    position: relative;
}

.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--body-fg);
    font-family: var(--font-family-primary);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.user-menu-toggle:hover,
.user-menu.open .user-menu-toggle {
    background: var(--float-surface-hover);
    border-color: var(--link-fg);
}

.user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.user-menu-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-toggle .bx {
    font-size: 16px;
    opacity: 0.6;
    transition: transform 0.15s;
}

.user-menu.open .user-menu-toggle .bx-chevron-down {
    transform: rotate(180deg);
}

/* Panel açılırken JS tarafından body'ye taşınıyor (user.menu.js): #header de
   #content de position:fixed, yani ikisi de birer yığın bağlamı; #content
   sonra geldiği için başlıktan taşan hiçbir şey görünmüyor. Başlığa z-index
   vermek ise breadcrumb'ı gizliyor — o da #content'in içinde ve başlık
   şeridinin üzerine biniyor. Bu yüzden panel iki bağlamdan da çıkarılıyor. */
.user-menu-panel {
    position: fixed;
    min-width: 250px;
    padding: 6px;
    background: var(--float-surface-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--float-surface-shadow);
    z-index: 9998;
    text-align: left;
}

.user-menu-panel[hidden] {
    display: none;
}

.user-menu-header {
    padding: 10px 12px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--hairline-color);
    line-height: 1.45;
}

.user-menu-header strong {
    display: block;
    color: var(--body-fg);
    font-size: 14px;
}

.user-menu-greeting,
.user-menu-email {
    display: block;
    color: var(--body-quiet-color);
    font-size: 12px;
}

.user-menu-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Panel body'ye taşınsa da #logout-form gibi id'li kurallar peşini bırakmıyor;
   renk/alt çizgi/dolgu burada açıkça sıfırlanıyor. */
.user-menu-panel a,
.user-menu-panel button,
.user-menu-panel #logout-form button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--body-fg);
    font-family: var(--font-family-primary);
    font-size: 13px;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
}

.user-menu-panel a:hover,
.user-menu-panel a:focus,
.user-menu-panel button:hover,
.user-menu-panel button:focus,
.user-menu-panel #logout-form button:hover {
    background: var(--float-surface-hover);
    color: var(--link-fg);
    text-decoration: none;
}

.user-menu-panel .bx {
    font-size: 17px;
    opacity: 0.7;
}

/* --- Görüntülü görüşme müsaitlik anahtarı ------------------------------- */
/* Panel açılırken body'ye taşınıyor, o yüzden kurallar .user-menu-panel'e
   bağlı: menünün içindeki konumuna göre seçici yazmak çalışmaz. */

.user-menu-panel .user-menu-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--hairline-color);
    color: var(--body-fg);
    font-size: 13px;
}

.user-menu-panel .user-menu-switch-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    line-height: 1.35;
}

.user-menu-panel .user-menu-switch-text small {
    color: var(--body-quiet-color);
    font-size: 11px;
}

.user-menu-panel .user-menu-switch-control {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    cursor: pointer;
}

.user-menu-panel .user-menu-switch-control input {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
}

.user-menu-panel .user-menu-switch-slider {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: var(--border-color);
    transition: background 0.15s ease-in-out;
}

.user-menu-panel .user-menu-switch-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--float-surface-bg, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease-in-out;
}

.user-menu-panel .user-menu-switch-control input:checked ~ .user-menu-switch-slider {
    background: var(--primary);
}

.user-menu-panel .user-menu-switch-control input:checked ~ .user-menu-switch-slider::after {
    transform: translateX(16px);
}

.user-menu-panel .user-menu-switch-control input:focus-visible ~ .user-menu-switch-slider {
    outline: 2px solid var(--link-fg);
    outline-offset: 2px;
}

/* Görüşme sürerken: anahtar dokunulamaz olduğunu göstersin, kullanıcı
   tıklayıp neden çalışmadığını aramasın. */
.user-menu-panel .user-menu-switch.is-locked {
    opacity: 0.6;
}

.user-menu-panel .user-menu-switch.is-locked .user-menu-switch-control {
    cursor: not-allowed;
}

.user-menu-panel #logout-form {
    display: block;
    margin: 4px 0 0;
    padding-top: 4px;
    border-top: 1px solid var(--hairline-color);
}

.user-menu-panel .user-menu-logout {
    color: var(--delete-button-bg);
}

.user-menu-panel .user-menu-logout:hover {
    background: var(--message-error-bg);
    color: var(--delete-button-bg);
}

/* --- QR: changeform'daki satır içi açılır alan ------------------------- */

.pairing-qr-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.pairing-qr-panel {
    margin-top: 10px;
}

.pairing-qr-panel[hidden] {
    display: none;
}

/* QR'ın kendisi her zaman beyaz zemin üstünde durmalı: koyu temada koyu
   zemine düşen kod okunmuyor. */
.pairing-qr-frame {
    display: inline-block;
    padding: 12px;
    background: #ffffff;
    border-radius: 10px;
    line-height: 0;
}

.pairing-qr-frame svg {
    width: 200px;
    height: 200px;
    display: block;
}

.pairing-qr-note {
    max-width: 280px;
    margin: 8px 0 0;
    color: var(--body-quiet-color);
    font-size: 12px;
    line-height: 1.5;
}

.pairing-qr-error {
    margin: 8px 0 0;
    color: var(--error-fg);
    font-size: 12px;
}

/* --- QR: kullanıcı menüsünden açılan modal ----------------------------- */

#pairing-qr-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    z-index: 9999;
}

#pairing-qr-modal {
    position: relative;
    min-width: 300px;
    max-width: 360px;
    padding: 24px 24px 20px;
    background: var(--float-surface-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--float-surface-shadow);
    text-align: center;
}

#pairing-qr-modal h2 {
    margin: 0 0 14px;
    color: var(--body-fg);
    font-size: 16px;
}

#pairing-qr-modal .pairing-qr-note {
    max-width: none;
    text-align: center;
}

#pairing-qr-modal .pairing-qr-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--body-quiet-color);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

#pairing-qr-modal .pairing-qr-close:hover {
    color: var(--body-fg);
}

@media (max-width: 767px) {
    #user-tools {
        flex-wrap: wrap;
    }

    .user-menu-name {
        max-width: 90px;
    }
}

/* ==========================================================================
   PAROLA DEĞİŞTİRME
   ========================================================================== */

/* Başlık kutusu (#content > h1) alt köşeleri düz, kendisinden sonra gelen
   kartla birleşecek şekilde tasarlanmış — changelist'te sonuç tablosuyla
   yaptığı gibi. Bu sayfada araya boşluk giriyordu; formu başlığa yapıştırıp
   tek bir kart haline getiriyoruz. */
body.password-change #content > h1 {
    border-bottom: 0;
}

body.password-change #content-main > fieldset.module {
    margin-top: 0;
    border-top: 0 !important;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 10px 15px #00000013;
    padding-top: 5px;
}

body.password-change #content-main > fieldset.module .form-row:last-child {
    border-bottom: 0;
}

body.password-change .submit-row {
    margin-top: 20px;
}

/* "Ana sayfa" bağlantısı (done sayfası) kartın içinde, gönder düğmesiyle aynı
   ölçüde dursun: a.button varsayılan olarak 4px dolgulu ve altı çizili. */
body.password-change fieldset.module .submit-row {
    margin: 0;
    padding: 12px 15px;
    border: 0;
    background: none;
}

/* admin/css/base.css'teki alt çizgi kuralı :not() içinde #header taşıdığı için
   id ağırlığında; buradaki seçici de o yüzden #content-main ile başlıyor. */
body.password-change #content-main .submit-row a.button {
    padding: 10px 15px;
    text-decoration: none;
}


#decisions-group td.field-rationale{
    white-space: normal !important;
}