input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Language selector flag icons (SVG served from /flags). Sized relative to the
   surrounding text; flag-icons SVGs are 4:3 (640x480) so height stays auto and
   the flag renders as a rectangle rather than a square. */
.lang-flag {
    display: inline-block;
    width: 1.3em;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    vertical-align: -0.18em;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}

/* Agency login full-bleed: the ThemeHost wrapper sits outside the scoped
   component, so force it (and body) to full width here, not in scoped CSS.
   Also pin the document to the viewport and clip overflow so the login fits on
   one screen with no scrollbar (the body otherwise carries a 60px bottom margin
   + the generic min-height:100% rule, which push past the fold). */
html:has(.agency-login-theme-host),
body:has(.agency-login-theme-host) {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.agency-login-theme-host {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Narrow / stacked layout is taller than the viewport — let it scroll normally
   instead of clipping the form or the stats band. */
@media (max-width: 1180px) {
    html:has(.agency-login-theme-host),
    body:has(.agency-login-theme-host) {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .agency-login-theme-host {
        height: auto;
        overflow: visible;
    }
}

/* Hide the global "İşleniyor" processing toast on the login screen — the initial
   language/slide/session calls flash it and it's unwanted on the login page. */
body:has(.agency-login-theme-host) .request-activity-toast {
    display: none !important;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

/* Fix Bootstrap tab content visibility - ensure active tabs are always visible */
.tab-pane.active,
.tab-pane.show.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.tab-pane:not(.active) {
    display: none !important;
}

/* Override Bootstrap fade that might hide content */
.tab-content .tab-pane.fade {
    opacity: 1 !important;
}

.tab-content .tab-pane.fade.show.active {
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   OnlineMes PanelX Custom Styles
   ======================================== */

:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #245169 url('/images/bg2020.jpg') no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

/* PanelX Style Top Navbar */
.panelx-navbar {
    background: #222;
    border-bottom: 3px solid var(--primary-color);
    min-height: 30px;
    margin-bottom: 0;
    z-index: 1050;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.panelx-navbar .navbar-nav>li>a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    color: #fff !important;
    font-size: 12px;
}

.panelx-navbar .navbar-nav>li>a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.panelx-navbar .dropdown-menu {
    background: #333;
    border: 1px solid #444;
    overflow: visible;
}

.panelx-navbar.nav-suppress-hover .dropdown-menu,
.panelx-navbar.nav-suppress-hover .dropdown-submenu > .dropdown-menu,
.panelx-navbar.nav-suppress-hover .dropdown-submenu > .dropdown-menu.show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.panelx-navbar .dropdown-menu>li>a,
.panelx-navbar .dropdown-menu .dropdown-item {
    color: #fff;
    padding: 3px 10px;
    font-size: 11px;
}

.panelx-navbar .dropdown-menu>li>a i,
.panelx-navbar .dropdown-menu .dropdown-item i {
    width: 16px;
    text-align: center;
    margin-right: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
}

.panelx-navbar .dropdown-menu>li>a:hover,
.panelx-navbar .dropdown-menu .dropdown-item:hover {
    background: rgba(102, 126, 234, 0.3);
}

.panelx-navbar .dropdown-menu>li>a.active,
.panelx-navbar .dropdown-menu .dropdown-item.active,
.panelx-navbar .dropdown-menu>li>a.active *,
.panelx-navbar .dropdown-menu .dropdown-item.active * {
    color: #fff !important;
}

.panelx-navbar .dropdown-submenu {
    position: relative;
}

/* Add padding to create larger hover area - prevents menu from closing when moving to submenu */
.panelx-navbar .dropdown-submenu>a {
    padding-right: 25px !important;
}

/* Ensure submenu appears immediately adjacent to parent with no gap */
.panelx-navbar .dropdown-submenu {
    position: relative;
}

/* Delayed hide to keep menu open when moving mouse */
.panelx-navbar .dropdown-submenu>.dropdown-menu {
    transition-delay: 0.1s;
}

.panelx-navbar .dropdown-submenu>.dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    display: none !important;
    visibility: hidden;
    opacity: 0;
    z-index: 1060;
    min-width: 200px;
    background: #333;
    border: 1px solid #444;
}

/* Force submenu to show on hover - override Bootstrap */
.panelx-navbar .dropdown-submenu:hover>.dropdown-menu,
.panelx-navbar .dropdown-submenu>.dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override Bootstrap's dropdown-menu display:none for submenus */
.panelx-navbar .dropdown-menu .dropdown-menu {
    display: none;
}

.panelx-navbar .dropdown-submenu:hover>.dropdown-menu {
    display: block !important;
}

.panelx-navbar .dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.panelx-navbar .navbar-toggler {
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0.2rem 0.45rem;
    border: 1px solid #444;
    color: #fff;
    position: relative;
    z-index: 1061;
}

.panelx-navbar .navbar-toggler:focus,
.panelx-navbar .navbar-toggler:active:focus {
    box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.2);
}

.panelx-navbar .navbar-toggler-icon {
    width: 1.4em;
    height: 1.4em;
    background-size: 1.4em 1.4em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.panelx-navbar .navbar-toggle {
    margin-top: 0px;
    margin-bottom: 0px;
    border-color: #444;
}

.panelx-navbar .navbar-toggle .icon-bar {
    background-color: #fff;
}

/* Hide sidebar */
.main-sidebar {
    display: none !important;
}

.content-wrapper {
    background: transparent !important;
    margin-top: 0;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 0 !important;
    padding-bottom: 50px;
}

.content {
    padding-top: 30px !important;
}

/* Popup windows (PopupLayout) have no fixed top navbar, so the 60px navbar offset
   above leaves a dead gap at the top of any .content-wrapped popup page. Collapse it. */
.popup-container .content {
    padding-top: 0.5rem !important;
}

.main-footer {
    margin-left: 0 !important;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

.card {
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

.card:focus-within {
    z-index: 1000;
}

/* Default card header - only apply to cards without AdminLTE variant classes */
/* This allows AdminLTE card-primary, card-success, etc. styles to work properly */
.card:not(.card-primary):not(.card-secondary):not(.card-success):not(.card-danger):not(.card-warning):not(.card-info):not(.card-light):not(.card-dark):not([class*="text-bg-"]) .card-header {
    background: rgba(102, 126, 234, 0.1);
    padding: 0.5rem 1rem;
}

.card-body {
    padding: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: none;
}

/* Compact/Dense Form Elements */
.form-control,
.form-select {
    /* padding: 0.25rem 0.5rem; */
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: calc(1.5em + 0.5rem + 2px);
}

.form-control-sm,
.form-select-sm {
    /* padding: 0.15rem 0.4rem; */
    font-size: 0.8125rem;
    min-height: calc(1.5em + 0.3rem + 2px);
}

.btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.btn-sm {
    padding: 0.15rem 0.5rem;
    font-size: 0.8125rem;
}

.input-group-text {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

label {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.form-group {
    margin-bottom: 0.75rem;
}

/* DataTables Dense/Compact Styling */
table.table {
    font-size: 0.75rem !important;
}

table.table th,
table.table td {
    padding: 0.3rem 0.4rem !important;
    vertical-align: middle !important;
}

table.table th {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    background-color: rgba(102, 126, 234, 0.05) !important;
    color:black;
}

table.table-sm th,
table.table-sm td {
    padding: 0.2rem 0.3rem !important;
    font-size: 0.7rem !important;
}

table.dataTable tbody tr {
    height: auto !important;
}

table.dataTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

table .btn-sm {
    padding: 0.1rem 0.4rem !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
}

table .btn-sm i {
    font-size: 0.7rem !important;
}

/* DataTables specific */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 0.75rem !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem !important;
    height: calc(1.3em + 0.4rem + 2px) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.75rem !important;
}

/* Select2 Custom Styling - Compact */
.select2-container--bootstrap-5 .select2-selection {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    min-height: calc(1.5em + 0.5rem + 2px);
}

.select2-container--bootstrap-5 .select2-selection--single {
    padding: 0.25rem 0.5rem;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
    line-height: 1.5;
    font-size: 0.875rem;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.5rem);
}

.select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.15rem 0.3rem;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    padding: 0.1rem 0.4rem;
    font-size: 0.8125rem;
    margin: 0.1rem 0.2rem 0.1rem 0;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.select2-dropdown {
    border: 1px solid #667eea;
    border-radius: 0.375rem;
    font-size: 0.75rem !important;
}

.select2-container--bootstrap-5 .select2-results__option {
    padding: 0.15rem 0.4rem !important;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    min-height: auto !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #667eea !important;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem !important;
    height: calc(1.3em + 0.4rem + 2px) !important;
}

.select2-results__options {
    max-height: 300px !important;
}

.select2-container--bootstrap-5 .select2-results__group {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600;
}

.select2-search--dropdown {
    padding: 0.25rem 0.25rem !important;
}

.select2-results__options li {
    padding: 0.15rem 0.4rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

/* Navigation Menu TODO Badge Styles */
.dropdown-item .badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    margin-left: 0.25rem;
    font-weight: 600;
}

.dropdown-item:hover .badge {
    background-color: #ff9800 !important;
}

.nav-item .badge {
    vertical-align: middle;
}

/* Dropdown Submenu Styles */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    display: none !important;
    visibility: hidden;
    opacity: 0;
    z-index: 1060;
}

.dropdown-submenu:hover>.dropdown-menu,
.dropdown-submenu>.dropdown-menu.show {
    display: block !important;
    visibility: visible;
    opacity: 1;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

/* ========================================
   AChat Window Styles
   ======================================== */
.achat-dialog {
    padding: 0 !important;
    overflow: hidden;
    z-index: 9999 !important;
}

.achat-dialog .ui-dialog-titlebar {
    background: linear-gradient(135deg, #20a0a0 0%, #1a8080 100%);
    border: none;
    border-radius: 0;
    padding: 8px 10px;
    cursor: move;
}

.achat-dialog .ui-dialog-title {
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.achat-dialog .ui-dialog-titlebar-close {
    display: none !important;
}

.achat-macos-buttons {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.achat-macos-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.achat-macos-dot::before {
    content: "";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 7px;
    opacity: 0;
    transition: opacity 0.2s;
}

.achat-macos-buttons:hover .achat-macos-dot::before {
    opacity: 0.6;
}

.achat-macos-close {
    background-color: #ff5f56;
    border: 0.5px solid #e0443e;
}

.achat-macos-close::before {
    content: "\f00d";
    color: #4c0000;
}

.achat-macos-minimize {
    background-color: #ffbd2e;
    border: 0.5px solid #dea123;
}

.achat-macos-minimize::before {
    content: "\f068";
    color: #995700;
}

.achat-macos-maximize {
    background-color: #27c93f;
    border: 0.5px solid #1aab29;
}

.achat-macos-maximize::before {
    content: "\f065";
    color: #006500;
}

.achat-macos-dot:hover {
    opacity: 0.8;
}

.achat-dialog .ui-dialog-content {
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.achat-dialog .ui-resizable-handle {
    background: transparent;
}

/* ============================================================
   Kickback module (Hotel Volume + Operator) — shared stat tiles
   .okb-summary was previously unstyled (the kickback pages carry
   no scoped css). Give the summary tiles a clean themed card look
   that works in both Classic and Aqua.
   ============================================================ */
.okb-summary {
    height: 100%;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 3px solid var(--bs-primary, #0d6efd);
    border-radius: 0.55rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.okb-summary:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.okb-summary .lbl {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    line-height: 1.2;
    margin-bottom: 0.15rem;
}

.okb-summary .val {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2d3d;
    line-height: 1.15;
}

.okb-cur-table th {
    background: #f5f7fa;
    font-weight: 600;
}