/* Mirex Enterprise Logistics - Compact IDE Workbench Styling Architecture */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
    --mx-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --mx-font-mono: 'JetBrains Mono', monospace;

    /* mirex.com.tr: mavi birincil; kırmızı yalnızca ince marka vurgusu (--mx-red-accent) */
    --mx-primary: #0e4194;
    --mx-primary-hover: #0c367a;
    --mx-primary-light: #ebf3fa;
    --mx-primary-border: #93c5fd;

    --mx-brand-blue: #0e4194;
    --mx-link: #0e4194;

    --mx-red-accent: #e30613;
    --mx-accent: #164ea9;
    --mx-accent-light: #1a56b8;

    --mx-success: #3eb15b;
    --mx-success-light: #eaf7ed;

    --mx-warning: #ffb400;
    --mx-warning-light: #fff8e6;

    --mx-danger: #ea423f;
    --mx-danger-light: #fdecea;

    --mx-info: #3a86c8;
    --mx-info-light: #ebf3fa;

    /* Neutral Surfaces */
    --mx-bg: #f7f7f7;
    --mx-surface: #ffffff;
    --mx-surface-hover: #f8fafc;
    --mx-border: #d1dfec;
    --mx-border-light: #e3ebf4;

    /* Text Hierarchy */
    --mx-text-main: #333333;
    --mx-text-muted: #666666;
    --mx-text-light: #999999;

    /* Elevation & Radius */
    --mx-radius-sm: 4px;
    --mx-radius-md: 6px;
    --mx-radius-lg: 8px;
    --mx-radius-xl: 10px;

    /* Ana içerik genişliği — mx-content / mx-module-shell */
    --mx-content-max: 1600px;
    --mx-content-gutter: 272px; /* sidebar + main-container boşlukları */

    --mx-shadow-subtle: 0 1px 3px 0 rgba(14, 65, 148, 0.08);
    --mx-shadow-card: 0 2px 6px 0 rgba(14, 65, 148, 0.1);
    --mx-shadow-float: 0 10px 20px -3px rgba(14, 65, 148, 0.15);
}

/* Global Reset - Compact IDE Size (13px Base Font) */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body, body.mirex-app {
    font-family: var(--mx-font-sans);
    background-color: var(--mx-bg);
    color: var(--mx-text-main);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem; /* 14px Comfortable Standard */
}

/* App Shell Layout */
.mx-app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Top Enterprise Header (mavi kabuk — mirex-chrome.css ile tamamlanır) */
.mx-header {
    height: 50px;
    background: var(--mx-brand-blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 4px rgba(14, 65, 148, 0.15);
}

.mx-header__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--mx-brand-blue);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.mx-header__brand-icon {
    width: 28px;
    height: 28px;
    background: var(--mx-red-accent);
    border-radius: var(--mx-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.mx-header__brand-logo {
    height: 32px;
    width: auto;
    max-width: 170px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

.mx-header__user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
    min-width: 0;
}

.mx-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 4px 12px;
    border-radius: var(--mx-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: #f1f5f9;
}

.mx-user-pill__name {
    color: #ffffff;
    font-weight: 700;
}

.mx-user-pill__role {
    color: #cbd5e1;
    font-size: 0.7rem;
    font-weight: 500;
}

.mx-user-pill__divider {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 2px;
}

.mx-user-pill__branch {
    color: var(--mx-chrome-muted);
    font-weight: 600;
}

.mx-sidebar__user-profile {
    padding: 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--mx-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mx-sidebar__user-name {
    font-weight: 700;
    font-size: 0.8125rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mx-sidebar__user-branch {
    font-size: 0.725rem;
    color: var(--mx-chrome-muted);
    margin-top: 2px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mx-sidebar__user-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.mx-sidebar__user-action-link {
    font-size: 0.7rem;
    color: #cbd5e1;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.15s ease;
}

.mx-sidebar__user-action-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Main Container & Sidebar (Mustang Admin Royal Blue Theme) */
.mx-main-container {
    display: flex;
    flex: 1;
    min-width: 0;
    padding: 12px 0 12px 12px;
    gap: 12px;
}

.mx-sidebar {
    width: 230px;
    background: var(--mx-primary);            /* Mustang Admin Royal Blue */
    display: flex;
    flex-direction: column;
    padding: 14px 8px 18px 12px;
    gap: 14px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.18);
    position: sticky;
    top: 62px;
    align-self: flex-start;
    height: calc(100vh - 100px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px;
    transition: width 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.mx-sidebar::-webkit-scrollbar {
    width: 6px;
}

.mx-sidebar::-webkit-scrollbar-track {
    margin: 10px 0;
    background: transparent;
}

.mx-sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid transparent;
    background-clip: padding-box;
}

.mx-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.38);
}

.mx-sidebar::-webkit-scrollbar-corner {
    background: transparent;
}

.mx-sidebar--collapsed {
    width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    border: none;
}

.mx-header__start {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.mx-sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--mx-radius-sm);
    color: #ffffff;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mx-sidebar__toggle::before {
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.mx-sidebar__toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mx-sidebar__group-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #96b6e8;                 /* Soft light blue header text */
    padding: 0 10px;
    margin-bottom: 4px;
}

.mx-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: #ffffff;                 /* Clean white text */
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--mx-radius-sm);
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.mx-sidebar__link-icon {
    display: none;
}

.mx-sidebar__link:hover {
    background: var(--mx-accent-light);            /* Lighter royal blue hover */
    color: #ffffff;
}

.mx-sidebar__link.is-active {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-weight: 700;
    border-left: 4px solid var(--mx-red-accent);
}

/* Content Area */
.mx-content {
    flex: 1;
    min-width: 0;
    padding: 16px 18px;
    max-width: min(var(--mx-content-max), calc(100vw - var(--mx-content-gutter)));
    margin: 0 auto;
    width: 100%;
    overflow-x: clip;
    scrollbar-gutter: stable;
}

.mx-module-shell,
.mx-module-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Page Header (Compact 16px Header) */
.mx-page-header, .mirex-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mx-page-title, .mirex-page-header__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mx-text-main);
    margin: 0;
    letter-spacing: -0.01em;
}

.mx-page-subtitle, .mirex-page-header__subtitle {
    font-size: 0.75rem;
    color: var(--mx-text-muted);
    margin-top: 1px;
}

.mx-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: end;
    margin: 0 0 1rem;
    padding: 0.75rem 0.85rem;
    background: var(--mx-surface, #fff);
    border: 1px solid var(--mx-border);
    border-radius: 10px;
}

/* Kart içinde iç içe kutu olmasın (Takip sorgu satırı) */
.mx-filter-bar--flush {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.mx-filter-bar .mx-form-group {
    margin: 0;
    flex: 1 1 140px;
    max-width: 220px;
}

.mx-filter-bar .mx-form-group--grow {
    flex: 2 1 220px;
    max-width: none;
}

.mx-filter-bar__actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
    align-items: center;
}

.mx-form-section {
    margin: 0 0 1.25rem;
    padding: 0 0 1.15rem;
    border-bottom: 1px solid var(--mx-border);
}

.mx-form-section:last-of-type {
    border-bottom: 0;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
}

.mx-form-section__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mx-text, #0f172a);
}

.mx-form-section__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--mx-primary, #1d4ed8);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.mx-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.35rem;
}

.mx-module-shell > .mx-content-tabs {
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--mx-bg, #f5f7fb);
    padding-top: 4px;
}

.mx-ops-toolbar {
    top: 0;
}

.mx-content-tabs--hub {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 4px;
}

.mx-content-tabs--hub .mx-content-tabs__item {
    min-width: 4.25rem;
    text-align: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

.mx-content-tabs--compact {
    margin-top: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.mx-module-shell > .mx-content-tabs + .mx-content-tabs--compact {
    margin-top: -4px;
    padding-top: 0;
}


.mx-table__empty .mx-button-group,
.mx-table__empty-actions {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.mx-filter-form__hint {
    flex: 1 1 100%;
    margin: 0.25rem 0 0;
}

.courier-map {
    height: 500px;
    border-radius: 8px;
    border: 1px solid var(--mx-border, #e1e4e8);
    background: #f4f5f7;
}

.route-actions {
    margin-top: 12px;
}

.mx-rule-data {
    margin: 0;
    padding: 8px;
    white-space: pre-wrap;
    max-width: 320px;
    max-height: 120px;
    overflow: auto;
    background: #f7f8fa;
    border-radius: 6px;
    border: 1px solid var(--mx-border);
    font-size: 0.8rem;
}

.mx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Compact IDE Workbench Cards */
.mx-card, .mirex-card, .mirex-list-page__panel, .mirex-list-page__filters, .mirex-toolbar--filters {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    box-shadow: var(--mx-shadow-subtle);
    margin-bottom: 16px;
    overflow: hidden;
}

/* Bazi kartlar (ör. kargo etiket tasarimcisi) sticky/degisken yukseklikte ic
   icerik barindirir; genel .mx-card overflow:hidden bu icerigi sessizce kirpip
   scroll'u imkansiz hale getiriyordu (Musteri Detay > Tipler sekmesi). */
.mx-card--overflow-visible {
    overflow: visible;
}

.mx-card__header, .mirex-list-page__header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--mx-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
}

.mx-card__header--wrap {
    flex-wrap: wrap;
    align-items: flex-start;
}

.mx-card__header--wrap .mx-page-subtitle--tight {
    white-space: normal;
    max-width: 100%;
}

.mx-form-inline--integration {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.mx-form-grid--station {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.mx-card__title, .mirex-list-page__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mx-text-main);
    margin: 0;
}

.mx-card__body, .mirex-list-page__body {
    padding: 16px;
}

/* Uniform Compact Form Inputs & Selects (36px Height) */
.mx-form-group, .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.mx-form-group label, .control-label, label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mx-text-muted);
}

.mx-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.mx-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
}

.mx-input, .mx-select, .mx-textarea, .form-control {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    background-color: #ffffff;
    color: var(--mx-text-main);
    transition: all 0.1s ease;
}

.mx-textarea {
    height: auto;
    padding: 10px 12px;
}

.mx-input:focus, .mx-select:focus, .mx-textarea:focus, .form-control:focus {
    outline: none;
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mx-primary) 18%, transparent);
}

/* Header Utilities */
.mx-header__brand-sub {
    font-weight: 400;
    font-size: 0.8125rem;
    opacity: 0.75;
}

.mx-header__search {
    flex: 1 1 0;
    min-width: 0;
    max-width: min(400px, 34vw);
    margin: 0;
}

.mx-header__search-icon {
    flex-shrink: 0;
    line-height: 1;
    font-size: 0.875rem;
    opacity: 0.85;
}

.mx-header__search-form {
    position: relative;
    margin: 0;
}

.mx-header__search-form .mx-header__search-icon {
    position: absolute;
    left: 12px;
    top: 8px;
    color: #94a3b8;
}

.mx-header__search-input {
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding-left: 36px;
}

.mx-header__search-input::placeholder {
    color: #94a3b8;
}

.mx-header__search-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.mx-user-pill__status {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
}

.mx-header__logout-form {
    display: inline;
    margin: 0;
}

.mx-header__logout {
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: #ffffff !important;
}

/* Compact Buttons (36px Height) */
.mx-btn, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--mx-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.1s ease;
    white-space: nowrap;
}

.mx-btn--block {
    width: 100%;
}

.mx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.mx-icon--excel svg {
    width: 1.05em;
    height: 1.05em;
    display: block;
}

.mx-btn--sm .mx-icon--excel svg {
    width: 14px;
    height: 14px;
}

.mx-btn--primary, .btn-primary {
    background: var(--mx-primary);
    border-color: var(--mx-primary);
    color: #ffffff !important;
}
.mx-btn--primary:hover, .btn-primary:hover {
    background: var(--mx-primary-hover);
    border-color: var(--mx-primary-hover);
}

.btn-success {
    background: var(--mx-success);
    border-color: var(--mx-success);
    color: #ffffff !important;
}
.btn-success:hover {
    background: #33974d;
    border-color: #33974d;
}

.btn-warning {
    background: var(--mx-warning);
    border-color: var(--mx-warning);
    color: #ffffff !important;
}
.btn-warning:hover {
    background: #e5a200;
    border-color: #e5a200;
}

.btn-info {
    background: var(--mx-info);
    border-color: var(--mx-info);
    color: #ffffff !important;
}
.btn-info:hover {
    background: #2d70a8;
    border-color: #2d70a8;
}

.mx-btn--secondary, .btn-default, .btn-secondary {
    background: #ffffff;
    border-color: var(--mx-border);
    color: var(--mx-text-main) !important;
}
.mx-btn--secondary:hover, .btn-default:hover, .btn-secondary:hover {
    background: var(--mx-surface-hover);
}

.mx-btn--danger, .btn-danger {
    background: var(--mx-danger);
    border-color: var(--mx-danger);
    color: #ffffff !important;
}
.mx-btn--danger:hover, .btn-danger:hover {
    background: #d63330;
    border-color: #d63330;
}

.mx-btn--sm, .btn-sm {
    height: 30px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

.btn-xs {
    height: 26px;
    padding: 0 10px;
    font-size: 0.75rem;
    border-radius: 4px;
}

/* Compact KPI Stat Cards Grid */
.mx-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.mx-stat-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mx-stat-card__val {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--mx-text-main);
    letter-spacing: -0.02em;
    line-height: 1;
}

.mx-stat-card__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mx-text-muted);
    margin-top: 4px;
}

.mx-stat-card__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--mx-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.mx-stat-card__icon--primary { background: var(--mx-primary-light); color: var(--mx-primary); }
.mx-stat-card__icon--success { background: var(--mx-success-light); color: var(--mx-success); }
.mx-stat-card__icon--warning { background: var(--mx-warning-light); color: var(--mx-warning); }
.mx-stat-card__icon--info { background: var(--mx-info-light); color: var(--mx-info); }

/* Compact Enterprise Data Tables */
.mx-table-container {
    overflow-x: auto;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
}

.mx-table, .table, .mx-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.mx-table th, .table th, .mx-data-table th {
    background: #f8fafc;
    color: var(--mx-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mx-border);
}

.mx-table td, .table td, .mx-data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--mx-border-light);
    color: var(--mx-text-main);
}

.mx-table tr:hover td, .table tr:hover td {
    background: #f8fafc;
}

/* Badges */
.mx-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--mx-radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.mx-badge--primary { background: var(--mx-primary-light); color: var(--mx-primary); }
.mx-badge--success { background: var(--mx-success-light); color: var(--mx-success); }
.mx-badge--warning { background: var(--mx-warning-light); color: var(--mx-warning); }
.mx-badge--danger { background: var(--mx-danger-light); color: var(--mx-danger); }
.mx-badge--info { background: var(--mx-info-light); color: var(--mx-info); }

/* Modals */
.modal, .modal.fade {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal.in, .modal.show {
    display: flex !important;
}

.modal-dialog {
    background: #ffffff;
    border-radius: var(--mx-radius-lg);
    box-shadow: var(--mx-shadow-float);
    width: 100%;
    max-width: 600px;
    overflow: hidden;
}

.modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mx-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
}

.modal-body {
    padding: 16px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--mx-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: #fafafa;
}

.modal-header .close,
button.close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mx-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.modal-header .close:hover,
button.close:hover {
    background: rgb(15 23 42 / 6%);
    color: var(--mx-text-main);
}

/* Utility used by overlay/cargo modals and tab panels */
.hidden {
    display: none !important;
}

/* IDE Monospace Numbers & Code Highlighting */
.mx-table td[data-mono], .mx-code, code {
    font-family: var(--mx-font-mono);
    font-weight: 600;
}

/* Table Row Focus Highlight */
.mx-table tbody tr {
    transition: background-color 0.1s ease;
}

.mx-table tbody tr:hover td {
    background-color: #f1f5f9;
}

.mx-table tbody tr.is-selected td {
    background-color: var(--mx-primary-light);
    border-top: 1px solid var(--mx-primary-border);
    border-bottom: 1px solid var(--mx-primary-border);
}

/* Classic Mirex.UI Vertical Left Tabs Layout */
.mirex-ops-tabs .tabbable.tabs-left {
    display: flex;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    overflow: hidden;
    box-shadow: var(--mx-shadow-card);
    min-height: 520px;
}

.mirex-ops-tabs .tabbable.tabs-left > .nav-tabs {
    width: 220px;
    min-width: 220px;
    border-right: 1px solid var(--mx-border);
    margin: 0;
    padding: 12px 0;
    background: #f8fafc;
    list-style: none;
}

.mirex-ops-tabs .tabbable.tabs-left > .nav-tabs > li {
    margin: 0;
    padding: 0;
}

.mirex-ops-tabs .tabbable.tabs-left > .nav-tabs > li > a,
.mirex-ops-tabs .tabbable.tabs-left > .nav-tabs > li > button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    padding: 12px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mx-text-muted);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.mirex-ops-tabs .tabbable.tabs-left > .nav-tabs > li > a:hover,
.mirex-ops-tabs .tabbable.tabs-left > .nav-tabs > li > button:hover {
    background: #f1f5f9;
    color: var(--mx-primary);
}

.mirex-ops-tabs .tabbable.tabs-left > .nav-tabs > li.active > a,
.mirex-ops-tabs .tabbable.tabs-left > .nav-tabs > li.active > button {
    color: var(--mx-primary);
    font-weight: 700;
    background: #ffffff;
    border-left: 4px solid var(--mx-primary);
}

.mirex-ops-tabs .tabbable.tabs-left > .tab-content {
    flex: 1;
    padding: 20px 24px;
    min-width: 0;
}

/* Page-Level Form Layouts */
.mx-form--vertical {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mx-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.mx-form-grid--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.mx-nak-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 16px;
    align-items: start;
}

.mx-form-panel {
    background: #fafafa;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.mx-form-panel__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mx-primary);
    margin-top: 0;
    margin-bottom: 12px;
}

.mx-form-panel__title--success {
    color: var(--mx-success);
}

.mx-badge--block {
    display: block;
    padding: 10px 14px;
    margin-bottom: 20px;
}

/* Action & Table Helpers */
.mx-button-group {
    display: flex;
    gap: 8px;
}

.mx-button-group--sm {
    gap: 6px;
}

.mx-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
}

.mx-filter-form > .mx-form-group {
    flex: 1 1 180px;
    min-width: 0;
    max-width: 100%;
}

.mx-filter-form > .mx-form-group--grow {
    flex: 2 1 220px;
    max-width: none;
}

.mx-filter-form > .mx-filter-actions {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    flex: 0 0 auto;
    align-items: end;
}

.mx-filter-form > .mx-filter-actions .mx-btn {
    width: auto;
    min-width: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.mx-filter-form > .mx-filter-export {
    flex: 0 0 auto;
    align-self: end;
    margin-left: auto;
    padding-left: 12px;
    border-left: 1px solid var(--mx-border);
}

.mx-form-group--no-margin {
    margin: 0;
}

.mx-card__body--flush {
    padding: 0;
}

.mx-table-container--flush {
    border: none;
    border-radius: 0;
}

.mx-table__col--checkbox {
    width: 40px;
}

/* Gönderi listesi: işlem butonları solda; yatay scroll'da görünür kalsın */
.mx-table--actions-left .mx-table__col--actions-left {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--mx-surface);
    box-shadow: 2px 0 6px -2px rgba(15, 23, 42, 0.08);
    vertical-align: middle;
}

.mx-table--actions-left.has-row-select .mx-table__col--actions-left {
    left: 40px;
}

.mx-table--actions-left thead .mx-table__col--actions-left {
    z-index: 11;
    background: #f8fafc;
}

.mx-table--actions-left .mx-table__col--actions-left .mx-button-group {
    flex-wrap: wrap;
    max-width: 11rem;
}

.mx-table--actions-left .mx-table__col--checkbox {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--mx-surface);
}

.mx-table--actions-left.has-row-select thead .mx-table__col--checkbox {
    z-index: 12;
    background: #f8fafc;
}

.mx-table--actions-left tbody tr:hover .mx-table__col--actions-left,
.mx-table--actions-left tbody tr:hover .mx-table__col--checkbox {
    background: var(--mx-surface-hover, #f8fafc);
}

/* Bos durum — TEK blok. Kalip: (istege bagli icon) + title + desc + istege bagli actions.
   Not: bu dosyada ikinci bir .mx-table__empty blogu vardi ve sonra geldigi icin kazaniyordu;
   sabit hex renklerle tema token'larini eziyordu. Iki blok burada birlestirildi. */
/* DIKKAT: asagidaki "display: flex", tarayicinin [hidden] { display: none } kuralini
   ezer — JS ile el.hidden = true yapilan bos-durum kutulari gizlenmez. Bu tuzak daha
   once .mx-btn'de de yasandi. Genel bir bastirma ile kalici olarak cozuluyor. */
[hidden] {
    display: none !important;
}

.mx-table__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    margin: 16px 0;
    text-align: center;
    color: var(--mx-text-muted);
    background: var(--mx-surface);
    border: 1px dashed var(--mx-border);
    border-radius: var(--mx-radius-lg);
    box-shadow: var(--mx-shadow-subtle);
}

/* Basliksiz (duz metin) bos durumda gorsel isaret olarak tire cizilir. */
.mx-table__empty::before {
    content: "—";
    display: block;
    margin-bottom: 12px;
    font-size: 2rem;
    color: var(--mx-border);
    line-height: 1;
}

/* Basligi olan bos durumda tire gizlenir; isaret gorevini icon/title devralir. */
.mx-table__empty:has(.mx-table__empty-title)::before {
    display: none;
}

.mx-table__empty-icon {
    font-size: 2rem;
    color: var(--mx-text-muted);
    margin-bottom: 8px;
    line-height: 1;
}

.mx-table__empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mx-text-main);
    margin: 0 0 4px;
}

.mx-table__empty-desc {
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
    margin: 0 0 16px;
}

.mx-table__link {
    font-weight: 700;
    color: var(--mx-primary);
    text-decoration: none;
}

.mx-table__cell--strong {
    font-weight: 600;
}

.mx-table__section > td {
    background: var(--mx-surface-muted, #f8fafc);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 10px;
    padding-bottom: 8px;
}

.mx-table__row--child > td:first-child {
    padding-left: 1.25rem;
}

.mx-table__row--clickable {
    cursor: pointer;
}

.mx-table__row--clickable:hover > td {
    background: color-mix(in srgb, var(--mx-primary) 8%, transparent);
}

/* Musteri Excel esleme: henuz eslesmemis alan satiri (bkz. Customers/Detail Excel sablonlari) */
.mx-excel-map-row--pending > td:first-child {
    border-left: 3px solid var(--mx-warning);
}

.mx-excel-map-row--pending .mx-table__cell--strong {
    color: var(--mx-warning);
}

/* Courier / Operation Page Layouts */
.mx-page-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 960px) {
    .mx-page-grid {
        grid-template-columns: 1fr;
    }
}

.mx-card--no-margin {
    margin: 0;
}

.mx-form--compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mx-input--scan {
    height: 48px;
    font-size: 1.125rem;
    font-family: var(--mx-font-mono);
}

.mx-info-box {
    margin-top: 20px;
    padding: 12px;
    background: var(--mx-primary-light);
    border-radius: 8px;
    border: 1px solid var(--mx-primary-border);
}

.mx-info-box__title {
    font-weight: 700;
    color: var(--mx-primary);
}

.mx-info-box__subtitle {
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
    margin-top: 4px;
}

.mx-table__empty--sm {
    padding: 24px;
}

.mx-table__cell--primary {
    font-weight: 700;
    color: var(--mx-primary);
}

/* Dashboard / Index Page */
.mx-button-group--md {
    gap: 10px;
}

.mx-card--spaced {
    margin-bottom: 24px;
}

.mx-card__body--padded {
    padding: 16px 20px;
}

.mx-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mx-search-bar__input {
    flex: 1;
    position: relative;
}

.mx-stat-link {
    text-decoration: none;
}

.mx-dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.mx-table__cell--muted {
    color: var(--mx-text-muted);
    font-size: 0.8125rem;
}

.mx-quick-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mx-btn--align-start {
    justify-content: flex-start;
}

/* Sorting / Inline Filter Forms */
.mx-filter-form--inline {
    display: flex;
    align-items: end;
    gap: 16px;
    flex-wrap: wrap;
}

.mx-form-group--grow-1 {
    flex: 1;
    min-width: 200px;
}

.mx-form-group--grow-2 {
    flex: 2;
    min-width: 260px;
}

.mx-btn--tall {
    height: 42px;
}

.mx-input--sm {
    height: 34px;
}

.mx-inline-form {
    display: inline;
}

/* Shipments / Detail Page */
.mx-button-group--wrap {
    flex-wrap: wrap;
}

.mx-stat-card__val--md {
    font-size: 1.125rem;
}

.mx-stat-card__val--sm {
    font-size: 1rem;
}

.mx-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.mx-card__detail-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--mx-text-main);
}

.mx-card__detail-muted {
    color: var(--mx-text-muted);
    margin-top: 4px;
}

.mx-card__detail-accent {
    font-weight: 600;
    color: var(--mx-primary);
    margin-top: 6px;
}

/* Text utilities */
.mx-text--light {
    color: var(--mx-text-light);
}

.mx-form--row-sm {
    display: flex;
    gap: 6px;
    align-items: center;
}

.mx-select--sm {
    height: 32px;
    font-size: 0.8125rem;
}

.mx-badge--inset {
    display: block;
    margin: 20px;
    padding: 12px;
}

.mx-modal__content {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

.mx-overlay-dialog {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgb(15 23 42 / 58%);
    animation: mx-overlay-fade 0.15s ease-out;
}

.mx-overlay-dialog.hidden {
    display: none !important;
}

.mx-overlay-dialog__content {
    display: flex;
    flex-direction: column;
    width: min(720px, 96vw);
    max-height: 92vh;
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgb(15 23 42 / 30%);
    border: 1px solid var(--mx-border);
    animation: mx-overlay-rise 0.18s ease-out;
}

.mx-overlay-dialog__content--wide {
    width: min(1100px, 96vw);
}

.mx-overlay-dialog__content--narrow {
    width: min(420px, 96vw);
}

.mx-overlay-dialog__content--picker {
    width: min(480px, 96vw);
}

.mx-overlay-dialog__header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--mx-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    background: #fff;
}

.mx-overlay-dialog__header-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.mx-overlay-dialog__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--mx-text-main);
    line-height: 1.3;
}

.mx-overlay-dialog__subtitle {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
    line-height: 1.4;
}

.mx-overlay-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mx-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.mx-overlay-dialog__close:hover {
    background: rgb(15 23 42 / 6%);
    color: var(--mx-text-main);
}

.mx-overlay-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

.mx-overlay-dialog__body--flush-bottom {
    padding-bottom: 8px;
}

.mx-overlay-dialog__footer {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-top: 1px solid var(--mx-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    background: #f8fafc;
}

.mx-overlay-dialog__footer .mx-btn {
    min-width: 96px;
}

.mx-overlay-dialog__footer--split {
    justify-content: space-between;
    align-items: center;
}

.mx-overlay-dialog__totals {
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
}

.mx-overlay-dialog__badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--mx-primary);
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

.mx-customer-detail-hub {
    margin-bottom: 16px;
}

.mx-capability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.mx-capability-grid--compact {
    margin-bottom: 12px;
}

.mx-capability {
    appearance: none;
    border: 1px solid var(--mx-border);
    background: var(--mx-surface, #fff);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mx-capability--static {
    cursor: default;
}

.mx-capability:hover:not(.mx-capability--static) {
    border-color: var(--mx-primary);
}

.mx-capability.is-ready {
    box-shadow: inset 3px 0 0 var(--mx-primary, var(--mx-primary));
}

.mx-capability.is-active {
    border-color: var(--mx-primary);
    box-shadow: inset 3px 0 0 var(--mx-red-accent, var(--mx-red-accent));
}

.mx-capability.is-missing {
    box-shadow: inset 3px 0 0 var(--mx-warning, #d97706);
    background: #fffbeb;
}

.mx-capability__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mx-text-muted);
}

.mx-capability__val {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mx-text-main);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-capability-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mx-capability-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid var(--mx-border);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--mx-text-muted);
    text-decoration: none;
    background: var(--mx-surface, #fff);
}

.mx-capability-chip.is-on {
    border-color: var(--mx-primary);
    color: var(--mx-primary);
    background: var(--mx-primary-light, #eff6ff);
}

.mx-capability-chip:hover {
    border-color: var(--mx-primary);
    color: var(--mx-primary);
}

.mx-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    font-size: 0.875rem;
    color: var(--mx-text-main);
}

html.mx-overlay-open,
body.mx-overlay-open {
    overflow: hidden;
}

@keyframes mx-overlay-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mx-overlay-rise {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.mx-form-hint {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
}

.mx-form-hint--warning {
    color: var(--mx-warning-text, #92400e);
    font-weight: 500;
}

.mx-card--no-border {
    margin: 0;
    box-shadow: none;
    border: none;
}

.mx-table__th--op {
    width: 120px;
}

.mirex-filter-actions--spaced {
    margin-top: 12px;
}

.mx-form-group--span-2 {
    grid-column: span 2;
}

.mx-form-group--full {
    grid-column: 1 / -1;
    margin-top: 8px;
}

.mirex-inline-form {
    display: inline-block;
}

.mirex-inline-form--mr {
    margin-right: 8px;
}

.w-100 {
    width: 100% !important;
}

/* Customer Detail / Tabs */
.customer-tab-pane--hidden {
    display: none;
}

.mx-tab-title {
    margin-top: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mx-primary);
    margin-bottom: 16px;
}

.mx-tab__empty {
    padding: 16px;
    background: #f8fafc;
    border-radius: 6px;
    color: var(--mx-text-muted);
    margin-bottom: 20px;
}

.mx-table-container--spaced {
    margin-bottom: 24px;
}

.mx-form-panel {
    background: #fafafa;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--mx-border);
}

.mx-form-panel__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mx-primary);
    margin: 0 0 12px 0;
}

.mx-form-grid--sm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.mx-form-grid--xs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.mx-text--success {
    color: var(--mx-success);
}

.mx-badge--padded {
    display: block;
    margin-bottom: 16px;
    padding: 12px;
}

.wizard-step-panel--hidden {
    display: none !important;
}

/* Shipment create wizard */
.mx-wizard {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 10px;
    overflow-x: auto;
}

.mx-wizard__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 7rem;
    text-align: center;
    color: var(--mx-text-muted);
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.mx-wizard__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: calc(50% + 1.35rem);
    width: calc(100% - 2.7rem);
    height: 2px;
    background: var(--mx-border);
}

.mx-wizard__step.is-completed:not(:last-child)::after,
.mx-wizard__step.is-active:not(:last-child)::after {
    background: var(--mx-primary-border);
}

.mx-wizard__step.is-completed:not(:last-child)::after {
    background: var(--mx-primary);
}

.mx-wizard__step-num {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    background: var(--mx-bg);
    border: 2px solid var(--mx-border);
    color: var(--mx-text-muted);
    z-index: 1;
}

.mx-wizard__step-label {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    max-width: 8.5rem;
}

.mx-wizard__step.is-active .mx-wizard__step-num {
    background: var(--mx-primary);
    border-color: var(--mx-primary);
    color: #fff;
}

.mx-wizard__step.is-active .mx-wizard__step-label {
    color: var(--mx-primary);
}

.mx-wizard__step.is-completed .mx-wizard__step-num {
    background: var(--mx-success-light);
    border-color: var(--mx-success);
    color: var(--mx-success);
}

.mx-wizard__step.is-completed .mx-wizard__step-label {
    color: var(--mx-text-main);
}

.mx-wizard__step.is-clickable {
    cursor: pointer;
}

.mx-wizard__step.is-clickable:hover .mx-wizard__step-num {
    border-color: var(--mx-primary);
}

.mx-form-grid--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mx-form-grid--2col-sm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mx-form-grid--2col-lg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.mx-form-grid--3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.mx-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mx-border-light);
}

.mx-form-actions--end {
    justify-content: flex-end;
}

.mx-form-actions--between {
    justify-content: space-between;
}

.mx-package-row {
    display: grid;
    grid-template-columns: minmax(140px, 2fr) repeat(5, minmax(72px, 1fr)) minmax(110px, 1.4fr);
    gap: 10px;
    margin-bottom: 12px;
    background: var(--mx-bg);
    padding: 12px;
    border: 1px solid var(--mx-border-light);
    border-radius: 8px;
    align-items: end;
}

.mx-package-row__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mx-text-muted);
    margin-bottom: 0.35rem;
}

.mx-wizard-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0 0.5rem;
}

.mx-wizard-preview__card {
    background: var(--mx-bg);
    border: 1px solid var(--mx-border-light);
    border-radius: 8px;
    padding: 1rem;
}

.mx-wizard-preview__card h4 {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--mx-primary);
}

.mx-wizard-preview__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--mx-border-light);
}

.mx-wizard-preview__row:last-child {
    border-bottom: 0;
}

.mx-wizard-preview__row span:first-child {
    color: var(--mx-text-muted);
}

.mx-wizard-preview__row span:last-child {
    font-weight: 600;
    text-align: right;
    color: var(--mx-text-main);
}

.mx-button-group--lg {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 960px) {
    .mx-form-grid--2col,
    .mx-form-grid--2col-lg,
    .mx-form-grid--3col,
    .mx-wizard-preview,
    .mx-nak-plan {
        grid-template-columns: 1fr;
    }

    .mx-package-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .mx-form-grid--2col-sm,
    .mx-package-row {
        grid-template-columns: 1fr;
    }

    .mx-wizard {
        padding: 0.85rem;
    }

    .mx-wizard__step {
        min-width: 5.5rem;
    }
}

.mx-btn--upload {
    cursor: pointer;
    margin: 0;
}

.mx-input--hidden {
    display: none;
}

.mx-toolbar--compact {
    padding: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.mx-select--auto {
    width: auto;
}

.mx-button-group--spaced {
    margin-bottom: 16px;
}

.mirex-card--spaced {
    margin-bottom: 12px;
}

.mirex-list-page__panel--spaced {
    margin-top: 1rem;
}

.courier-map {
    height: 500px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.courier-map-iframe {
    border: 1px solid #ccc;
    border-radius: 4px;
}

.print-page-break {
    page-break-after: always;
}

.form-group--no-margin {
    margin-bottom: 0;
}

.help-block--no-margin {
    margin: 0;
}

.row--spaced {
    margin-top: 8px;
}

.mx-input--max-220 {
    max-width: 220px;
}

.mirex-list-page__header--spaced {
    margin-top: 24px;
}

.mirex-card--spaced-lg {
    margin-bottom: 16px;
}

.mx-table__th--xs {
    width: 50px;
}

.mirex-form--spaced {
    margin-top: 12px;
}

.mirex-form-actions--spaced {
    margin-top: 12px;
}

.mx-card details > .mx-card__header {
    cursor: pointer;
}

/* Alt kayıt formu: kapalıyken yer kaplamaz; açıkken sağdan slide-over (liste kaymaz) */
details.mx-create-panel:not([open]) {
    display: none;
}

details.mx-create-panel--inline[open] {
    display: block;
    position: static;
    margin-top: 12px;
    width: auto;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    background: transparent;
    z-index: auto;
}

details.mx-create-panel:not(.mx-create-panel--inline)[open] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(540px, 92vw);
    margin: 0;
    z-index: 1051;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow: hidden;
    border: none;
    border-radius: 0;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
    background: var(--mx-surface, #ffffff);
}

body.mx-create-panel-open {
    overflow: hidden;
}

.mx-create-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

details.mx-create-panel:not(.mx-create-panel--inline)[open] > summary {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mx-border);
    background: var(--mx-surface-hover, #f8fafc);
    cursor: default;
}

details.mx-create-panel:not(.mx-create-panel--inline)[open] > summary .mx-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
}

details.mx-create-panel:not(.mx-create-panel--inline)[open] > .mx-card__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

details.mx-create-panel > summary {
    list-style: none;
    cursor: default;
}

details.mx-create-panel > summary::-webkit-details-marker {
    display: none;
}

.mx-create-panel__close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mx-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.mx-create-panel__close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mx-text-main);
}

.mx-page-subtitle--tight {
    margin: 4px 0 0;
}

.mx-page-subtitle--no-margin {
    margin: 0;
}

/* Gönderi Detail · Paket / ürün panosu */
.mx-pkg-board__toolbar {
    align-items: flex-start;
}

.mx-pkg-kpi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.mx-pkg-kpi__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 72px;
    padding: 8px 12px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-md);
    background: var(--mx-surface-soft, #f8fafc);
}

.mx-pkg-kpi__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mx-text-muted);
}

.mx-pkg-kpi__val {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mx-text-main);
    line-height: 1.2;
}

.mx-pkg-editor {
    border-color: rgb(14 65 148 / 35%);
    box-shadow: 0 0 0 1px rgb(14 65 148 / 12%);
}

.mx-pkg-list {
    display: grid;
    gap: 12px;
}

.mx-pkg-card {
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    overflow: hidden;
}

.mx-pkg-card.is-focus {
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 1px rgb(14 65 148 / 18%);
}

.mx-pkg-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mx-border);
    background: var(--mx-surface-soft, #f8fafc);
}

.mx-pkg-card__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mx-text-main);
}

.mx-pkg-card__id {
    margin-left: 6px;
    font-weight: 600;
    color: var(--mx-text-muted);
}

.mx-pkg-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

.mx-pkg-card__empty {
    padding: 14px 16px;
    color: var(--mx-text-muted);
    font-size: 0.8125rem;
    background: #fff;
}

.mx-pkg-table tr.is-editing {
    background: rgb(14 65 148 / 8%);
    outline: 1px solid rgb(14 65 148 / 25%);
}

.mx-pkg-card__add {
    padding: 0 12px 12px;
    background: #fff;
}

.mx-pkg-add-product {
    border: 1px dashed var(--mx-border);
    border-radius: var(--mx-radius-md);
    background: var(--mx-surface-soft, #f8fafc);
}

.mx-pkg-add-product__summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--mx-primary);
    user-select: none;
}

.mx-pkg-add-product__summary::-webkit-details-marker {
    display: none;
}

.mx-pkg-add-product__form {
    padding: 0 12px 12px;
}

.mx-card--spaced-sm {
    margin-top: 16px;
    margin-bottom: 0;
}

.mx-content-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mx-border);
}

/* Klasik sekme şeridi (underline) — tüm hub / ekran / filtre */
.mx-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--mx-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.mx-tabs__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.55rem 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--mx-text-muted, #64748b);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.mx-tabs__item:hover {
    color: var(--mx-text, #0f172a);
}

.mx-tabs__item:focus-visible {
    outline: 2px solid var(--mx-primary, #1d4ed8);
    outline-offset: -2px;
    border-radius: 4px;
}

.mx-tabs__item.is-active {
    color: var(--mx-primary, #1d4ed8);
    border-bottom-color: var(--mx-primary, #1d4ed8);
    background: transparent;
}

.mx-tabs__count {
    min-width: 1.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgb(15 23 42 / 8%);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    color: inherit;
}

.mx-tabs__item.is-active .mx-tabs__count {
    background: color-mix(in srgb, var(--mx-primary, #1d4ed8) 16%, transparent);
}

.mx-tabs--secondary {
    margin-top: 0;
    border-bottom-color: transparent;
}

.mx-tabs--secondary .mx-tabs__item {
    min-height: 2.15rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.mx-tabs--secondary .mx-tabs__item.is-active {
    font-weight: 700;
}

.mx-tabs--tertiary {
    margin-top: 0;
    border-bottom: 1px solid var(--mx-border, #e2e8f0);
    gap: 0.15rem;
}

.mx-tabs--tertiary .mx-tabs__item {
    min-height: 1.9rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mx-text-muted, #64748b);
}

.mx-tabs--tertiary .mx-tabs__item.is-active {
    font-weight: 700;
    color: var(--mx-primary, var(--mx-primary));
}

.mx-hub--stacked > .mx-tabs--tertiary {
    padding-bottom: 0.35rem;
}

/* Kurye atama pipeline (A→B→C→D) */
.mx-courier-pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.mx-courier-pipeline__step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 140px;
    min-width: 120px;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--mx-border, #e2e8f0);
    border-radius: 8px;
    background: var(--mx-surface, #fff);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mx-courier-pipeline__step:hover {
    border-color: var(--mx-primary, var(--mx-primary));
}

.mx-courier-pipeline__step.is-active {
    border-color: var(--mx-primary, var(--mx-primary));
    box-shadow: inset 3px 0 0 var(--mx-red-accent, var(--mx-red-accent));
    background: color-mix(in srgb, var(--mx-primary, var(--mx-primary)) 6%, #fff);
}

.mx-courier-pipeline__step.has-work .mx-courier-pipeline__val {
    color: var(--mx-primary, var(--mx-primary));
    font-weight: 700;
}

.mx-courier-pipeline__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 6px;
    background: var(--mx-primary, var(--mx-primary));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mx-courier-pipeline__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mx-courier-pipeline__label {
    font-size: 0.75rem;
    color: var(--mx-text-muted, #64748b);
}

.mx-courier-pipeline__val {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
}

.mx-courier-pipeline__arrow {
    width: 12px;
    align-self: center;
    flex: 0 0 12px;
    height: 2px;
    background: var(--mx-border, #cbd5e1);
}

.mx-courier-stage-hint {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.mx-courier-stage-hint .mx-form-hint {
    margin: 0;
}

.mx-courier-steps {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.55;
}

.mx-courier-steps li + li {
    margin-top: 0.25rem;
}

.mx-courier-list-hint {
    margin: 0.5rem 0.75rem 0.25rem;
}

.mx-info-box--success {
    border-left: 3px solid var(--mx-success, #15803d);
}

.mx-info-box--danger {
    border-left: 3px solid var(--mx-danger, #b91c1c);
}

.mx-excel-map-toolbar {
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mx-excel-map-pending-only {
    white-space: nowrap;
}

.mx-excel-template-dialog .mx-excel-map-actions {
    position: sticky;
    bottom: 0;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    background: linear-gradient(to top, #ffffff 70%, rgb(255 255 255 / 0%));
    z-index: 1;
}

@media (max-width: 720px) {
    .mx-courier-pipeline__arrow {
        display: none;
    }
}

.mx-tabs__label {
    display: inline-flex;
    align-items: center;
    padding: 0 0.35rem 0 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mx-text-muted, #64748b);
    white-space: nowrap;
}

/* İçerik filtre sekmeleri (durum / dönem) — hub altında sade underline */
.mx-tabs--filter {
    margin: 0 0 0.85rem;
    background: transparent;
    border-bottom: 1px solid var(--mx-border);
}

.mx-tabs--filter .mx-tabs__item {
    min-height: 2.1rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.mx-tabs--filter .mx-tabs__item.is-active {
    font-weight: 700;
}

/* Tek tip hub kabuÄŸu (sticky) */
.mx-hub,
.mx-ops-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 1rem;
    padding: 0;
    background: var(--mx-bg, #f5f7fb);
    position: sticky;
    top: 0;
    z-index: 6;
}

.mx-hub > .mx-tabs,
.mx-ops-nav > .mx-tabs {
    background: var(--mx-surface, #fff);
    border: 1px solid var(--mx-border);
    border-radius: 10px;
    padding: 0 0.35rem;
    border-bottom-width: 1px;
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 0.1rem;
}

.mx-hub--stacked > .mx-tabs:first-child,
.mx-ops-nav > .mx-tabs:first-child {
    border-radius: 10px 10px 0 0;
}

.mx-hub--stacked > .mx-tabs--secondary,
.mx-ops-nav > .mx-tabs--secondary {
    background: var(--mx-surface, #fff);
    border: 1px solid var(--mx-border);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    padding: 0 0.35rem;
    margin-bottom: 0;
}

.mx-hub:not(.mx-hub--stacked) > .mx-tabs,
.mx-module-shell > .mx-tabs {
    margin-bottom: 0;
}

.mx-module-content > .mx-page-header:first-child {
    margin-top: 0.15rem;
}

.mx-content-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    background: var(--mx-surface);
    color: var(--mx-text-muted);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.mx-content-tabs__item:hover {
    color: var(--mx-primary);
    border-color: var(--mx-primary-border, #93c5fd);
}

.mx-content-tabs__item.is-active {
    color: #ffffff;
    background: var(--mx-primary);
    border-color: var(--mx-primary);
}

.mx-content-tabs__count {
    min-width: 1.4rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgb(15 23 42 / 8%);
    font-size: 0.6875rem;
}

.mx-content-tabs__item.is-active .mx-content-tabs__count {
    background: rgb(255 255 255 / 22%);
}

.mx-section-panel[hidden] {
    display: none !important;
}

.mx-section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.mx-card__body--flush > .mx-section-toolbar {
    padding: 12px 16px 0;
    margin-bottom: 8px;
}

.mx-input-combo {
    display: flex;
    gap: 6px;
    align-items: center;
}

.mx-input-combo .mx-select,
.mx-input-combo .mx-input {
    flex: 1;
    min-width: 0;
}

.mx-pricing-modal__assign {
    margin-bottom: 14px;
}

.mx-pricing-modal__assign--scoped .mx-form-group:first-child {
    opacity: 0.72;
}

.mx-pricing-modal__toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.mx-pricing-modal__scroll {
    max-height: 360px;
    overflow: auto;
}

.mx-pricing-modal .mx-table-container {
    max-height: 280px;
    overflow: auto;
}

.mx-pricing-modal .mx-content-tabs {
    margin-bottom: 12px;
}

.mx-form-group--grow-1 {
    flex: 1 1 240px;
}

.mx-pricing-modal .form-control,
.mx-pricing-modal .mx-input,
.mx-pricing-modal .mx-select {
    width: 100%;
}

@media (max-width: 800px) {
    .mx-content-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .mx-content-tabs__item {
        flex: 0 0 auto;
    }

    .mx-pricing-modal__toolbar {
        align-items: stretch;
        flex-direction: column;
    }
}

.mirex-standalone-page {
    min-height: 100vh;
    margin: 0;
    color: var(--mx-text-main);
    background:
        radial-gradient(circle at top left, rgb(20 86 166 / 12%), transparent 34rem),
        var(--mx-bg);
}

.mirex-tracking-shell {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 48px;
}

/* Giris ekrani: sabit "padding-top: 8vh" kart'i sayfanin ust kismina yapistirip
   altinda genis bir bosluk birakiyordu. Dikeyde ortalayip (hafif ust agirlikli)
   dar ekranlarda tasmayi onleyecek sekilde revize edildi. */
.mirex-tracking-shell.mx-login-shell {
    width: min(520px, calc(100% - 32px));
}

.mx-login-shell {
    width: min(520px, calc(100% - 32px));
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0;
}

@media (max-height: 640px) {
    .mx-login-shell {
        justify-content: flex-start;
        padding-top: 6vh;
    }
}

.mirex-tracking-header {
    margin-bottom: 18px;
    text-align: center;
}

.mx-tracking-brand {
    color: var(--mx-brand-blue);
    font-size: 1.15rem;
    font-weight: 800;
    text-decoration: none;
}

.mx-login-logo {
    display: block;
    max-width: 200px;
    height: auto;
    margin: 0 auto 16px;
}

.mx-login-card {
    width: 100%;
    text-align: center;
}

.mx-login-card .mx-card__header {
    padding: 18px 24px;
}

.mx-login-card .mx-card__body {
    text-align: left;
    padding: 24px 28px;
}

.mirex-form-card,
.mirex-modal-detail {
    overflow: hidden;
}

.mirex-card__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mx-border);
    background: var(--mx-surface-soft);
}

.mirex-card__body {
    padding: 20px;
}

.mirex-card__title {
    margin: 0;
    color: var(--mx-text-main);
    font-size: 1rem;
}

.mirex-card__subtitle {
    margin: 6px 0 0;
    color: var(--mx-text-muted);
}

.mirex-tracking-form .form-group {
    margin-bottom: 16px;
}

.mirex-tracking-form .control-label {
    display: block;
    margin-bottom: 6px;
    color: var(--mx-text-main);
    font-size: 0.8rem;
    font-weight: 700;
}

.mirex-form-actions,
.mirex-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mirex-tracking-form .btn-primary {
    width: 100%;
}

.mx-alert {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-md);
    background: var(--mx-surface);
    color: var(--mx-text-main);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.mx-alert a {
    color: var(--mx-primary);
    font-weight: 700;
}

.mx-alert--info {
    background: var(--mx-info-light);
    border-color: #b7d4eb;
    color: #1e4e72;
}

.mx-alert--warning {
    color: #92400e;
    border-color: #fbbf24;
    background: #fffbeb;
}

.mx-cargo-ops-bridge {
    margin-bottom: 12px;
}

.mx-tracking-footer {
    padding: 0 16px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mx-tracking-footer a {
    color: var(--mx-text-muted);
    font-size: 0.8rem;
    text-decoration: none;
}

.mx-tracking-footer a:hover {
    color: var(--mx-primary);
    text-decoration: underline;
}

.mx-tracking-footer__brand {
    color: var(--mx-text-muted);
    font-size: 0.78rem;
}

.mx-tracking-footer__staff {
    font-size: 0.75rem;
    opacity: 0.85;
}

.mx-tracking-hero {
    text-align: center;
    margin-bottom: 24px;
}

.mx-tracking-hero__logo {
    display: block;
    max-width: 168px;
    height: auto;
    margin: 0 auto 14px;
}

.mx-tracking-hero__title {
    margin: 0;
    color: var(--mx-primary);
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.mx-tracking-hero__lead {
    margin: 10px auto 0;
    max-width: 36rem;
    color: var(--mx-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.mx-tracking-search-card {
    padding: 20px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    box-shadow: 0 8px 28px rgb(14 65 148 / 6%);
}

.mx-tracking-search-form__label {
    display: block;
    margin-bottom: 8px;
    color: var(--mx-text-main);
    font-size: 0.82rem;
    font-weight: 700;
}

.mx-tracking-search-form__row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.mx-tracking-search-form__input {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
}

.mx-tracking-search-form__submit {
    flex-shrink: 0;
    min-width: 7rem;
}

.mx-tracking-empty {
    margin-top: 20px;
    padding: 28px 20px;
    text-align: center;
    border: 1px dashed var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
}

.mx-tracking-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--mx-surface-soft);
    color: var(--mx-primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.mx-tracking-empty__title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--mx-text-main);
}

.mx-tracking-empty__desc {
    margin: 0 auto;
    max-width: 28rem;
    color: var(--mx-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.mx-tracking-empty__actions {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mx-tracking-result-card {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    box-shadow: 0 8px 28px rgb(14 65 148 / 6%);
}

.mx-tracking-status-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mx-border);
}

.mx-tracking-status-banner__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.mx-tracking-status-banner__date {
    color: var(--mx-text-muted);
    font-size: 0.82rem;
}

.mx-tracking-status-banner__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mx-tracking-status-banner__no {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--mx-text-muted);
}

.mx-tracking-route-pill {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: var(--mx-radius-md);
    background: var(--mx-surface-soft);
    color: var(--mx-text-main);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
}

.mx-tracking-eta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: var(--mx-radius-sm);
    border: 1px solid var(--mx-border);
    background: var(--mx-surface-soft);
    font-size: 0.88rem;
}

.mx-tracking-eta__label {
    color: var(--mx-text-muted);
}

.mx-tracking-eta__value {
    color: var(--mx-text-main);
    font-weight: 600;
}

.mx-tracking-map-panel {
    margin-top: 18px;
}

.mx-tracking-map-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mx-tracking-map-panel__title {
    margin: 0;
    font-size: 0.95rem;
    color: var(--mx-text-main);
}

.mx-tracking-map-panel__fallback {
    margin: 0;
    padding: 14px;
    border-radius: var(--mx-radius-sm);
    background: var(--mx-surface-soft);
    color: var(--mx-text-muted);
    font-size: 0.88rem;
}

.mx-tracking-parties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.mx-tracking-party {
    padding: 12px 14px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    background: var(--mx-surface-soft);
}

.mx-tracking-party__label {
    display: block;
    margin-bottom: 4px;
    color: var(--mx-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mx-tracking-party__value {
    display: block;
    color: var(--mx-text-main);
    font-size: 0.88rem;
    line-height: 1.45;
    word-break: break-word;
}

.mx-tracking-events {
    margin-top: 22px;
}

.mx-tracking-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.mx-tracking-section-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    background: var(--mx-surface);
    color: var(--mx-text-main);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

.mx-tracking-section-nav__link:hover,
.mx-tracking-section-nav__link.is-active {
    border-color: var(--mx-primary);
    color: var(--mx-primary);
}

.mx-tracking-attachments {
    margin-top: 22px;
    scroll-margin-top: 16px;
}

.mx-tracking-events,
.mx-tracking-attachments {
    scroll-margin-top: 16px;
}

.mx-tracking-events__title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--mx-text-main);
}

.mirex-tracking-result {
    margin-top: 18px;
}

.mx-tracking-summary,
.mx-tracking-route,
.mirex-address-card {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    background: var(--mx-surface-soft);
}

.mirex-address-card__line,
.mx-tracking-timeline__content span {
    display: block;
    margin-top: 4px;
    color: var(--mx-text-muted);
}

.mx-tracking-timeline__content {
    min-width: 0;
}

.mx-tracking-timeline__content strong {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mx-tracking-map {
    min-height: 280px;
    border-radius: var(--mx-radius-sm);
    border: 1px solid var(--mx-border);
}

.mx-tracking-timeline {
    position: relative;
}

.mx-tracking-timeline__item {
    display: grid;
    grid-template-columns: 20px minmax(7.5rem, 9rem) minmax(0, 1fr);
    gap: 12px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mx-border);
    align-items: start;
}

.mx-tracking-timeline__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mx-tracking-timeline__item.is-current .mx-tracking-timeline__marker {
    background: var(--mx-primary);
    box-shadow: 0 0 0 4px rgb(14 65 148 / 15%);
}

.mx-tracking-timeline__item.is-current .mx-tracking-timeline__content strong {
    color: var(--mx-primary);
}

.mx-tracking-timeline__marker {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--mx-border);
    justify-self: center;
}

.mx-tracking-timeline__date {
    color: var(--mx-text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
    min-width: 0;
}

.mx-tracking-timeline__time {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
}

@media (max-width: 800px) {
    .mx-header__search {
        display: none;
    }

    .mx-main-container {
        flex-direction: column;
        min-width: 0;
        padding: 0;
        gap: 0;
    }

    .mx-sidebar {
        width: 100%;
        flex-direction: row;
        gap: 8px;
        padding: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        position: relative;
        top: auto;
        height: auto;
        border-radius: 0;
        box-shadow: none;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    }

    .mx-sidebar::-webkit-scrollbar {
        height: 5px;
        width: auto;
    }

    .mx-sidebar::-webkit-scrollbar-track {
        margin: 0 8px;
    }

    .mx-sidebar > div {
        flex: 0 0 170px;
    }

    .mx-content {
        width: 100%;
        max-width: none;
        padding: 12px;
    }

    .mx-page-header,
    .mirex-page-header {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .mx-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mx-filter-form > .mx-form-group {
        flex: 1 1 100%;
    }

    .mx-filter-form > .mx-filter-export {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        flex: 1 1 100%;
    }

    .mx-form-group--span-2,
    .mx-form-group--full,
    .mx-form-group--full-row {
        grid-column: auto;
    }

    .mx-tracking-timeline__item {
        grid-template-columns: 16px 1fr;
        gap: 8px 12px;
    }

    .mx-tracking-timeline__date {
        grid-column: 2;
    }

    .mx-tracking-timeline__content {
        grid-column: 2;
    }

    .mx-tracking-parties {
        grid-template-columns: 1fr;
    }

    .mx-tracking-search-form__row {
        flex-direction: column;
    }

    .mx-tracking-search-form__submit {
        width: 100%;
    }

    .mx-tracking-status-banner {
        flex-direction: column;
    }
}

/* ---- Depo Sevk Operasyonu (cargo workspace) ---- */
.mx-cargo-app {
    display: grid;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
}

.mx-cargo-app > *,
.mx-cargo-customer-view,
.mx-cargo-customer-results {
    min-width: 0;
    max-width: 100%;
}

.mx-cargo-sync {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    background: var(--mx-surface);
    color: var(--mx-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.mx-cargo-workspace-alert {
    margin: 0;
}

.mx-cargo-sync.is-ok { color: var(--mx-success); border-color: #b7e0c3; background: var(--mx-success-light); }
.mx-cargo-sync.is-warn { color: #9a7400; border-color: #f0d789; background: var(--mx-warning-light); }
.mx-cargo-sync.is-error { color: var(--mx-danger); border-color: #f3b4b2; background: var(--mx-danger-light); }

.mx-cargo-toolbar,
.mx-cargo-intake .mirex-card,
.mx-cargo-list-filters {
    margin-bottom: 0;
}

.mx-cargo-toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

.mx-cargo-toolbar__filters,
.mx-cargo-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.mx-cargo-toolbar__group {
    display: grid;
    gap: 4px;
}

.mx-cargo-toolbar__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mx-text-muted);
}

.mx-cargo-toolbar__select {
    min-width: 160px;
}

.mx-cargo-view-btn.is-active {
    box-shadow: inset 0 0 0 1px rgb(14 65 148 / 25%);
}

.mx-cargo-dropzone {
    position: relative;
    padding: 18px 14px;
    border: 1.5px dashed var(--mx-border);
    border-radius: var(--mx-radius-md);
    background: var(--mx-surface-soft, #f8fafc);
    text-align: center;
}

.mx-cargo-dropzone__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.mx-cargo-dropzone__title {
    margin: 0;
    font-weight: 700;
    color: var(--mx-text-main);
}

.mx-cargo-dropzone__file {
    display: block;
    margin-top: 6px;
    color: var(--mx-text-muted);
    font-size: 0.75rem;
}

.mx-cargo-help,
.help-block {
    margin: 8px 0 0;
    color: var(--mx-text-muted);
    font-size: 0.75rem;
}

.mx-cargo-accordion-chevron {
    color: var(--mx-text-muted);
    font-size: 0.75rem;
}

.mx-cargo-list-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
}

.mx-card__body.mx-cargo-list-filters {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.mx-cargo-list-filters__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mx-cargo-list-filters__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mx-text-muted);
    margin-right: 4px;
}

.mx-cargo-list-filters__search {
    flex: 1 1 220px;
    display: flex;
    gap: 6px;
}

.mx-cargo-list-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.mx-cargo-date {
    width: 140px;
}

.mx-cargo-folder-list {
    display: grid;
    gap: 12px;
}

.mx-cargo-folder-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mx-cargo-folder-card__toggle {
    border: 0;
    background: transparent;
    color: var(--mx-text-main);
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.mx-cargo-folder-card__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mx-cargo-table-scroll {
    overflow: auto;
    max-height: 520px;
    max-width: 100%;
    width: 100%;
}

/* Takip sorgu sonucu: uzun satırlar sayfayı yatay kaydırmasın */
.mx-cargo-customer-results .mx-table {
    table-layout: fixed;
    width: 100%;
}

.mx-cargo-customer-results .mx-table th,
.mx-cargo-customer-results .mx-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.mx-cargo-customer-results .mx-table th:nth-child(1),
.mx-cargo-customer-results .mx-table td:nth-child(1) { width: 18%; }
.mx-cargo-customer-results .mx-table th:nth-child(2),
.mx-cargo-customer-results .mx-table td:nth-child(2) { width: 16%; }
.mx-cargo-customer-results .mx-table th:nth-child(3),
.mx-cargo-customer-results .mx-table td:nth-child(3) { width: 22%; }
.mx-cargo-customer-results .mx-table th:nth-child(4),
.mx-cargo-customer-results .mx-table td:nth-child(4) { width: 16%; }
.mx-cargo-customer-results .mx-table th:nth-child(5),
.mx-cargo-customer-results .mx-table td:nth-child(5) { width: 16%; }
.mx-cargo-customer-results .mx-table th:nth-child(6),
.mx-cargo-customer-results .mx-table td:nth-child(6) { width: 12%; }

/* Sevk edit modal — paket → ürün hiyerarşisi */
.mx-edit-packages {
    display: grid;
    gap: 12px;
}

.mx-edit-package {
    margin: 0;
}

.mx-edit-package__header {
    align-items: flex-end;
}

.mx-edit-package__meta {
    width: 100%;
    gap: 10px;
}

.mx-edit-package__actions .mx-button-group {
    flex-wrap: wrap;
}

.mx-mb-8 {
    margin-bottom: 8px;
}

/* İşlem sütunu yatay scroll'da her zaman sağda sabit kalsın */
.mx-cargo-folder-table th:last-child,
.mx-cargo-folder-table td:last-child {
    position: sticky;
    right: 0;
    background: var(--mx-surface);
    box-shadow: -6px 0 6px -6px rgba(15, 23, 42, 0.15);
    z-index: 1;
}

.mx-cargo-folder-table thead th:last-child {
    background: #f8fafc;
    z-index: 2;
}

.mx-cargo-folder-table tr:hover td:last-child {
    background: #f8fafc;
}

.mx-cargo-cell-stack {
    display: grid;
    gap: 4px;
}

.mx-cargo-cell-stack__line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.mx-cargo-cell-stack__meta {
    color: var(--mx-text-muted);
    font-size: 0.75rem;
}

.mx-cargo-status-cell__row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.mx-cargo-doc-list,
.mx-cargo-doc-chip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mx-cargo-doc-chip {
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--mx-primary-light);
    font-size: 0.6875rem;
}

.mx-cargo-doc-chip--link {
    text-decoration: none;
    color: var(--mx-primary);
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-table-doc-cell {
    min-width: 7.5rem;
    max-width: 11rem;
}

.mx-table-doc-cell__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-bottom: 4px;
}

.mx-table-doc-cell__more {
    font-size: 0.6875rem;
    text-decoration: none;
}

.mx-table-doc-cell .mx-cargo-doc-list {
    gap: 3px;
}

.mx-cargo-doc-list--panel {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
}

.mx-cargo-doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--mx-border);
    border-radius: 8px;
    background: var(--mx-surface);
}

.mx-cargo-doc-row__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mx-cargo-doc-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28rem;
}

.mx-cargo-row-flash td {
    animation: mx-cargo-flash 1.2s ease;
}

@keyframes mx-cargo-flash {
    from { background: #fff3cd; }
    to { background: transparent; }
}

.mx-cargo-scan-feedback {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-md);
}

.mx-cargo-scan-feedback.is-ok {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.mx-cargo-scan-feedback.is-warn {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.mx-cargo-scan-feedback.is-error {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.mx-cargo-scan-list:empty::before {
    content: "Henüz okutma yok. Barkodu okutarak başlayın.";
    display: block;
    color: var(--mx-text-muted);
    font-size: 0.9rem;
    padding: 0.75rem 0;
}

.mx-cargo-scan-group {
    margin-top: 10px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-md);
    overflow: hidden;
}

.mx-cargo-scan-group__head {
    padding: 8px 10px;
    background: var(--mx-surface-soft, #f8fafc);
    font-weight: 700;
}

.mx-cargo-scan-group__pkgs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
}

.mx-cargo-scan-pkg {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--mx-border);
}

.mx-cargo-scan-pkg.is-ok {
    background: var(--mx-success-light);
    color: var(--mx-success);
    border-color: #b7e0c3;
}

.mx-cargo-scan-pkg.is-missing {
    background: var(--mx-warning-light);
    color: #9a7400;
}

.mx-cargo-history-item {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--mx-border-light);
}

.mx-cargo-print-area {
    display: none !important;
}

@media print {
    body * { visibility: hidden !important; }
    .mx-cargo-print-area,
    .mx-cargo-print-area * { visibility: visible !important; }
    .mx-cargo-print-area {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 10cm;
        margin: 0;
        padding: 0;
    }
}

/* Bootstrap-ish aliases used by cargo partials */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    background: var(--mx-surface);
    color: var(--mx-text-main);
    font: inherit;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    text-decoration: none;
}

.btn-sm, .btn-xs { min-height: 26px; padding: 2px 8px; font-size: 0.75rem; }
.btn-primary { background: var(--mx-primary); border-color: var(--mx-primary); color: #fff; }
.btn-success { background: var(--mx-success); border-color: var(--mx-success); color: #fff; }
.btn-warning { background: var(--mx-warning); border-color: #e0a000; color: #333; }
.btn-danger { background: var(--mx-danger); border-color: var(--mx-danger); color: #fff; }
.btn-default { background: #fff; }

.form-control,
.form-control.input-sm,
.form-control.input-lg {
    width: 100%;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    background: #fff;
    color: var(--mx-text-main);
    font: inherit;
}

.form-group { margin-bottom: 10px; }
.control-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mx-text-muted);
}

.row.gutter {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
}

.col-sm-3 { grid-column: span 3; }
.col-sm-4 { grid-column: span 4; }
.col-sm-6 { grid-column: span 6; }
.col-sm-12 { grid-column: span 12; }

@media (max-width: 800px) {
    .col-sm-3, .col-sm-4, .col-sm-6 { grid-column: span 12; }
}

.input-group {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.input-group .form-control { flex: 1; }
.input-group-btn { display: flex; }

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mx-border-light);
    text-align: left;
    vertical-align: top;
}

.table thead th {
    background: var(--mx-surface-soft, #f8fafc);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mx-text-muted);
}

.label {
    display: inline-flex;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.label-default {
    background: rgb(15 23 42 / 8%);
    color: var(--mx-text-muted);
}

.mirex-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.mx-operations-shell.mirex-master-detail {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
    gap: 12px;
}

@media (max-width: 960px) {
    .mx-operations-shell.mirex-master-detail {
        grid-template-columns: 1fr;
    }
}

/* Utility Classes for Spacing & Alignment (Refactoring Cleanup) */
.mx-mt-12 { margin-top: 0.75rem !important; }
.mx-mt-16 { margin-top: 1rem !important; }
.mx-mb-16 { margin-bottom: 1rem !important; }
.mx-mb-20 { margin-bottom: 1.25rem !important; }
.mx-justify-center { justify-content: center !important; }
.mx-flex-align-center { display: flex !important; align-items: center !important; }
.mx-display-contents { display: contents !important; }
.mx-flex-grow-280 { flex: 1 1 280px !important; }
.mx-flex-grow-320 { flex: 1 1 320px !important; }

/* Leaflet Map Pin Marker */
.mx-map-pin {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #0f766e !important;
    color: #fff !important;
    font: 700 12px/1 var(--mx-font-sans), sans-serif !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
}

.mx-map {
    height: 320px;
    min-height: 320px;
    width: 100%;
    background: #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 14px;
}

.mx-map-iframe {
    height: 320px;
    min-height: 320px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
}

.mx-map-iframe iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Hidden Input Utility */
.mx-input--hidden {
    display: none !important;
}




/* Toast Notifications */
.mx-toast-host {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.mx-toast-host .mx-toast {
    pointer-events: auto;
    position: static;
    top: auto;
    right: auto;
}

.mx-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--mx-radius-md);
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    box-shadow: var(--mx-shadow-float);
    color: var(--mx-text-main);
    font-size: 0.875rem;
    max-width: 360px;
    transition: opacity 0.3s ease;
}

.mx-toast--success {
    border-left: 4px solid var(--mx-success);
}

.mx-toast--danger {
    border-left: 4px solid var(--mx-danger);
}

.mx-toast--warning {
    border-left: 4px solid var(--mx-warning, #d97706);
}

.mx-toast--info {
    border-left: 4px solid var(--mx-primary);
}

.mx-toast--hide {
    opacity: 0;
}

.mx-toast__message {
    flex: 1;
}

/* Confirm / Alert Modal (native confirm()/alert() yerine) */
.mx-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.45);
    animation: mx-confirm-fade 0.15s ease;
}

body.mx-confirm-open {
    overflow: hidden;
}

.mx-confirm {
    width: 100%;
    max-width: 420px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-md);
    box-shadow: var(--mx-shadow-float);
    border-top: 4px solid var(--mx-primary);
    padding: 20px;
}

.mx-confirm--danger {
    border-top-color: var(--mx-danger);
}

.mx-confirm__body {
    color: var(--mx-text-main);
    font-size: 0.9375rem;
    line-height: 1.5;
    white-space: pre-line;
}

/* mxPrompt — mirex-confirm ile ayni kabugu kullanir, yalnizca girdi alani ekler. */
.mx-confirm__label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.mx-confirm--prompt .mx-input {
    width: 100%;
}

.mx-confirm__error {
    margin: 6px 0 0;
    color: var(--mx-danger);
    font-size: 0.8125rem;
}

.mx-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

@keyframes mx-confirm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mx-toast__close {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--mx-text-muted);
    cursor: pointer;
}

.mx-toast__close:hover {
    color: var(--mx-text-main);
}

/* Loading states */
@keyframes mx-spin {
    to { transform: rotate(360deg); }
}

.mx-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.mx-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--mx-surface);
    border-top-color: transparent;
    border-radius: 50%;
    animation: mx-spin 0.8s linear infinite;
}

/* Responsive tables */
.mx-table-container {
    overflow-x: auto;
    max-height: 70vh;
    overflow-y: auto;
    position: relative;
}

.mx-table-container--flush {
    border: none;
    border-radius: 0;
}

.mx-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc;
}

.mx-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #f8fafc;
}

.mx-table th,
.mx-table td {
    white-space: nowrap;
}

@media (max-width: 960px) {
    .mx-table .hidden-md,
    .mx-table .hidden-sm {
        display: none;
    }
}

@media (max-width: 640px) {
    .mx-table .hidden-sm {
        display: none;
    }

    .mx-table th,
    .mx-table td {
        padding: 8px 10px;
        font-size: 0.8125rem;
    }
}

/* Breadcrumb */
.mx-breadcrumb {
    padding: 12px 0 4px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Geri baglantisi (mirex-backnav.js doldurur) */
.mx-breadcrumb__backslot {
    display: inline-flex;
}

.mx-breadcrumb__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm, 4px);
    background: var(--mx-surface);
    color: var(--mx-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.mx-breadcrumb__back:hover {
    background: var(--mx-primary);
    border-color: var(--mx-primary);
    color: #fff;
}

.mx-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

.mx-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mx-breadcrumb__link {
    color: var(--mx-primary);
    text-decoration: none;
}

.mx-breadcrumb__link:hover {
    text-decoration: underline;
}

.mx-breadcrumb__separator {
    color: var(--mx-border);
}

.mx-breadcrumb__current {
    color: var(--mx-text-main);
    font-weight: 600;
}

/* Inline validation */
.field-validation-error {
    display: block;
    color: var(--mx-danger);
    font-size: 0.75rem;
    margin-top: 4px;
}

.field-validation-error::before {
    content: "! ";
    font-weight: 700;
}

.field-validation-valid {
    display: none;
}

.input-validation-error,
.input-validation-error:focus {
    border-color: var(--mx-danger);
    box-shadow: 0 0 0 2px var(--mx-danger-light);
}

/* Cargo List Filter Bar Styling */
.mx-cargo-list-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mx-cargo-list-filters__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.mx-cargo-list-filters__row--secondary {
    padding-top: 8px;
    border-top: 1px solid var(--mx-border-light, #f1f5f9);
}

.mx-cargo-list-filters__group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mx-cargo-list-filters__status,
.mx-cargo-list-filters__source {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mx-cargo-list-filters__status-select,
.mx-cargo-list-filters__customer-select {
    min-width: 12rem;
}

.mx-cargo-list-filters__customer-input {
    min-width: 12rem;
}

.mx-cargo-list-filters__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mx-text-muted);
}

.mx-cargo-list-filters__search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 380px;
}

.mx-cargo-list-filters__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mx-cargo-list-filters__selection {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mx-cargo-sevk-stats {
    margin: 0;
}

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

.mx-btn--xs {
    padding: 2px 8px;
    font-size: 0.75rem;
    height: 24px;
    line-height: 1.2;
}

.mx-badge--neutral {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.mx-text-muted {
    color: var(--mx-text-muted, #64748b);
    font-size: 0.75rem;
}

/* Smooth Details Card Transition & Chevron */
details.mx-card summary.mx-card__header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

details.mx-card summary.mx-card__header:hover {
    background-color: #f8fafc;
}

details.mx-card summary.mx-card__header::-webkit-details-marker {
    display: inline-block;
    color: var(--mx-text-muted);
}

details.mx-card[open] summary.mx-card__header {
    border-bottom: 1px solid var(--mx-border);
}

/* Mobile Sticky Bulk Actions Toolbar */
@media (max-width: 640px) {
    .mx-bulk-toolbar--sticky-mobile:not([hidden]) {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        background: var(--mx-surface);
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.15);
        border-top: 1px solid var(--mx-border);
        border-radius: 12px 12px 0 0;
        margin: 0 !important;
        max-height: 42vh;
        overflow-y: auto;
    }

    body.mx-selection-bar-open {
        padding-bottom: 88px;
    }
}

/* Native Datepicker Picker Overlay Fix */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    z-index: 10001;
}

/* Table Empty State Standardization */
/* Header Quick Search Fake Input Trigger */
.mx-header__search-fake-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 14px;
    border-radius: var(--mx-radius-md, 8px);
    color: #ffffff;
    cursor: pointer;
    font-size: 0.84rem;
    transition: all 0.15s ease;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.mx-header__search-fake-input:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.mx-header__search-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
}

.mx-quicksearch-shortcut-badge {
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Quick Search Command Palette Modal */
.mx-quicksearch-modal {
    z-index: 1060;
}

.mx-quicksearch-dialog {
    max-width: 600px;
    width: 100%;
    overflow: hidden;
    padding: 0;
}

.mx-quicksearch-header {
    padding: 12px 16px;
    background: var(--mx-surface, #ffffff);
    border-bottom: 1px solid var(--mx-border);
}

.mx-quicksearch-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.mx-quicksearch-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--mx-text-main);
    background: transparent;
}

.mx-quicksearch-kbd {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.mx-quicksearch-body {
    padding: 12px;
    max-height: min(400px, 60vh);
    overflow-y: auto;
    background: var(--mx-surface, #ffffff);
}

.mx-quicksearch-hint {
    padding: 24px 16px;
    text-align: center;
    color: var(--mx-text-muted);
    font-size: 0.875rem;
}

.mx-quicksearch-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mx-quicksearch-item {
    margin-bottom: 4px;
}

.mx-quicksearch-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.mx-quicksearch-link:hover {
    background: #f1f5f9;
}

.mx-quicksearch-item-icon {
    font-size: 1.25rem;
}

.mx-quicksearch-item-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mx-text-main);
}

.mx-quicksearch-item-sub {
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

/* Interactive Dashboard Stat Cards */
.mx-stat-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mx-stat-link:hover {
    transform: translateY(-2px);
}

.mx-stat-link:hover .mx-stat-card {
    border-color: var(--mx-primary-light, #93c5fd);
    box-shadow: var(--mx-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}

.mx-stat-card {
    background: #ffffff;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg, 12px);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.15s ease;
}

.mx-stat-card__val {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mx-text-main);
    line-height: 1.2;
}

.mx-stat-card__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mx-text-muted);
    margin-top: 2px;
}

.mx-stat-card__icon {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}

.mx-stat-card__icon--primary { background: #eff6ff; color: #2563eb; }
.mx-stat-card__icon--info { background: #f0fdf4; color: #16a34a; }
.mx-stat-card__icon--success { background: #f0fdf4; color: #16a34a; }
.mx-stat-card__icon--warning { background: #fffbeb; color: #d97706; }

/* Mobile Scrollable Sub-tabs */
@media (max-width: 768px) {
    .mx-tabs--scrollable,
    .mx-content-tabs {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .mx-tabs--scrollable::-webkit-scrollbar,
    .mx-content-tabs::-webkit-scrollbar {
        display: none;
    }
    .mx-tabs--scrollable .mx-tab-btn,
    .mx-content-tabs .mx-content-tab {
        flex: 0 0 auto;
    }
}

/* Global Loading Overlay */
.mx-loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    background: rgba(245, 248, 251, 0.85);
    backdrop-filter: blur(2px);
}

.mx-loading-overlay.is-active {
    display: flex;
}

.mx-loading-overlay__spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--mx-border);
    border-top-color: var(--mx-primary);
    border-radius: 50%;
    animation: mx-spin 0.8s linear infinite;
}

.mx-loading-overlay__text {
    color: var(--mx-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

body.mx-loading,
body.mx-loading a,
body.mx-loading button {
    cursor: wait !important;
}

/* Otomasyon tasarimcisi (Faz 1) */
.mx-auto-designer__toolbar {
    margin-bottom: 14px;
    border-radius: 14px;
    overflow: hidden;
}

.mx-auto-designer__toolbar .mx-card__body {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    flex-wrap: wrap;
}

.mx-auto-designer__name-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 260px;
    flex: 1 1 260px;
}

.mx-auto-designer__name-group label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mx-text-muted);
}

.mx-auto-designer__name-group input {
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid var(--mx-border);
    border-radius: 0;
    padding: 4px 2px;
    background: transparent;
}

.mx-auto-designer__name-group input:focus {
    outline: none;
    border-bottom-color: var(--mx-primary, #1d4ed8);
    box-shadow: none;
}

.mx-auto-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mx-text-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.mx-auto-toggle input {
    appearance: none;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.mx-auto-toggle input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    transition: transform 0.15s ease;
}

.mx-auto-toggle input:checked {
    background: #16a34a;
}

.mx-auto-toggle input:checked::after {
    transform: translateX(16px);
}

.mx-auto-toggle span.is-on { color: #16a34a; }

.mx-auto-designer__toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.mx-auto-designer__template-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
    flex: 0 1 220px;
}

.mx-auto-designer__template-group label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mx-text-muted);
}

.mx-auto-designer__template-group .mx-select {
    font-size: 0.8125rem;
}

#autoWebhookInfo {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#autoGraphHealth {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-auto-designer__body {
    display: grid;
    grid-template-columns: 260px 1fr 300px;
    gap: 14px;
    align-items: start;
}

.mx-auto-designer__mobile-notice {
    display: none;
}

/* Surukle-birak canvas dogasi geregi masaustu araci — kucuk ekranda 3 kolonu ust uste
   yigip en azindan sayfanin YATAY tasmasini (butun govde disariya kaymasi) onluyoruz;
   canvas kendi icinde scroll edilebilir kalir (bkz. .mx-auto-designer__canvas-wrap). */
@media (max-width: 900px) {
    .mx-auto-designer__mobile-notice {
        display: block;
        margin-bottom: 12px;
    }

    .mx-auto-designer__body {
        grid-template-columns: 1fr;
    }

    .mx-auto-designer__palette,
    .mx-auto-designer__config {
        position: static;
        width: 100%;
    }

    .mx-auto-designer__canvas-wrap {
        min-height: 400px;
    }
}

.mx-auto-designer__palette {
    background: var(--mx-surface, #fff);
    border: 1px solid var(--mx-border);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 140px);
    box-shadow: 0 1px 3px rgb(15 23 42 / 6%);
    min-height: 0;
}

.mx-auto-palette-tabs {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px;
    background: var(--mx-surface-muted, #f1f5f9);
    border-radius: 10px;
}

.mx-auto-palette-tabs__btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 7px 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    color: var(--mx-text-muted, #64748b);
    font-family: inherit;
}

.mx-auto-palette-tabs__btn.is-active {
    background: var(--mx-surface, #fff);
    color: var(--mx-primary);
    box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
}

.mx-auto-palette-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    flex: 1;
}

.mx-auto-palette-panel[hidden] {
    display: none !important;
}

.mx-auto-flow-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.mx-auto-flow-new {
    flex-shrink: 0;
    justify-content: center;
}

.mx-auto-flow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.mx-auto-flow-empty {
    padding: 16px 8px;
}

.mx-auto-flow-item {
    border: 1px solid var(--mx-border);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mx-auto-flow-item.is-active {
    border-color: var(--mx-primary);
    background: color-mix(in srgb, var(--mx-primary) 6%, transparent);
}

.mx-auto-flow-item__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
}

.mx-auto-flow-item__link:hover .mx-auto-flow-item__name {
    color: var(--mx-primary);
}

.mx-auto-flow-item__name {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
}

.mx-auto-flow-item__meta {
    font-size: 0.6875rem;
    color: var(--mx-text-muted, #64748b);
    line-height: 1.35;
}

.mx-auto-flow-item__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mx-auto-flow-item__runs {
    font-size: 0.6875rem;
}

.mx-auto-flow-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mx-auto-palette-search {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mx-auto-palette-hint {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.35;
}

.mx-auto-palette-scroll {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 2px;
    min-height: 0;
}

.mx-auto-palette-group {
    border: 1px solid var(--mx-border);
    border-radius: 10px;
    padding: 0 0 6px;
    background: var(--mx-surface-muted, #f8fafc);
}

.mx-auto-palette-group > summary {
    margin: 0;
    padding: 8px 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mx-text-muted);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.mx-auto-palette-group > summary::-webkit-details-marker {
    display: none;
}

.mx-auto-palette-group > summary::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mx-auto-palette-group > summary.mx-auto-palette-h--trigger::before { background: var(--mx-success, #16a34a); }
.mx-auto-palette-group > summary.mx-auto-palette-h--condition::before { background: var(--mx-warning, #d97706); }
.mx-auto-palette-group > summary.mx-auto-palette-h--action::before { background: var(--mx-primary, #1d4ed8); }

.mx-auto-palette-group .mx-auto-node-btn {
    margin: 0 6px 4px;
    width: calc(100% - 12px);
}

.mx-auto-node-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    padding: 9px 10px;
    border-radius: 9px;
    border: 1px solid var(--mx-border);
    background: var(--mx-surface, #fff);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mx-text, #0f172a);
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}

.mx-auto-node-btn:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgb(15 23 42 / 10%);
}

.mx-auto-node-btn:active {
    cursor: grabbing;
}

.mx-auto-node-btn__icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.mx-auto-node-btn--trigger { border-left: 3px solid #16a34a; }
.mx-auto-node-btn--condition { border-left: 3px solid #d97706; }
.mx-auto-node-btn--action { border-left: 3px solid #1d4ed8; }

.mx-auto-designer__canvas-wrap {
    position: relative;
    min-height: 600px;
    background-color: var(--mx-surface-muted, #f1f5f9);
    background-image: radial-gradient(circle, rgb(15 23 42 / 14%) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
    border: 1px solid var(--mx-border);
    border-radius: 14px;
    overflow: auto;
    box-shadow: inset 0 1px 4px rgb(15 23 42 / 6%);
}

.mx-auto-canvas-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 6px 12px;
    background: rgb(248 250 252 / 92%);
    border-bottom: 1px solid var(--mx-border);
    backdrop-filter: blur(4px);
}

.mx-auto-canvas-toolbar .mx-form-hint {
    margin: 0;
    font-size: 0.75rem;
}

.mx-auto-designer__empty-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mx-text);
}

.mx-auto-designer__canvas {
    position: relative;
    width: 100%;
    height: 600px;
    min-width: 900px;
}

.mx-auto-designer__edges {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 600px;
    min-width: 900px;
    pointer-events: none;
    z-index: 1;
}

.mx-auto-edge {
    fill: none;
    stroke: #94a3b8;
    stroke-width: 2.5;
    pointer-events: stroke;
    cursor: pointer;
    marker-end: url(#mxAutoArrow);
    transition: stroke 0.1s ease;
}

.mx-auto-edge:hover {
    stroke: #ef4444;
}

.mx-auto-edge--pending {
    stroke: var(--mx-primary, #1d4ed8);
    stroke-dasharray: 6 4;
    pointer-events: none;
}

.mx-auto-node {
    position: absolute;
    z-index: 2;
    width: 168px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--mx-border);
    box-shadow: 0 2px 10px rgb(15 23 42 / 10%);
    cursor: grab;
    user-select: none;
    font-size: 0.8125rem;
    overflow: hidden;
    transition: box-shadow 0.12s ease;
}

.mx-auto-node:hover {
    box-shadow: 0 6px 18px rgb(15 23 42 / 16%);
}

.mx-auto-node:active {
    cursor: grabbing;
}

.mx-auto-node__head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-weight: 600;
    color: #fff;
    pointer-events: none;
}

.mx-auto-node--trigger .mx-auto-node__head { background: linear-gradient(135deg, #16a34a, #15803d); }
.mx-auto-node--condition .mx-auto-node__head { background: linear-gradient(135deg, #d97706, #b45309); }
.mx-auto-node--action .mx-auto-node__head { background: linear-gradient(135deg, #1d4ed8, #1e40af); }

.mx-auto-node__icon {
    font-size: 0.9375rem;
}

.mx-auto-node__title {
    flex: 1;
    line-height: 1.2;
}

.mx-auto-node__body {
    padding: 7px 10px 9px;
    color: var(--mx-text-muted);
    font-size: 0.75rem;
    min-height: 16px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mx-auto-node__delete {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: 2px solid #fff;
    font-size: 0.75rem;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
}

.mx-auto-node:hover .mx-auto-node__delete,
.mx-auto-node.is-selected .mx-auto-node__delete {
    display: flex;
}

.mx-auto-node.is-selected {
    box-shadow: 0 0 0 3px rgb(29 78 216 / 35%), 0 6px 18px rgb(15 23 42 / 16%);
}

.mx-auto-node__port {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mx-primary, #1d4ed8);
    cursor: crosshair;
    flex-shrink: 0;
    z-index: 4;
    transition: transform 0.1s ease;
}

.mx-auto-node__port:hover {
    transform: scale(1.25);
    background: var(--mx-primary, #1d4ed8);
}

.mx-auto-node__port--in { left: -7px; }
.mx-auto-node__port--out { right: -7px; }

.mx-auto-designer__config {
    background: var(--mx-surface, #fff);
    border: 1px solid var(--mx-border);
    border-radius: 14px;
    position: sticky;
    top: 12px;
    box-shadow: 0 1px 3px rgb(15 23 42 / 6%);
}

.mx-auto-designer__config .mx-card__header {
    background: var(--mx-surface-muted, #f8fafc);
    border-radius: 14px 14px 0 0;
}

.mx-auto-config-section {
    margin: 14px 0 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--mx-border);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mx-text-muted);
}

.mx-auto-config-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.mx-auto-designer__empty-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--mx-text-muted);
    font-size: 0.875rem;
    pointer-events: none;
    padding: 0 40px;
    z-index: 0;
}

/* Otomasyon tasarimcisi — Power Automate tarzı akış görünümü */
.mx-auto-designer--boot {
    visibility: hidden;
    min-height: 480px;
}

.mx-auto-designer__view-toggle {
    display: inline-flex;
    border: 1px solid var(--mx-border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.mx-auto-view-btn {
    border: none;
    background: var(--mx-surface, #fff);
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mx-text-muted);
    line-height: 1.2;
}

.mx-auto-view-btn + .mx-auto-view-btn {
    border-left: 1px solid var(--mx-border);
}

.mx-auto-view-btn.is-active {
    background: var(--mx-primary, #0e4194);
    color: #fff;
}

.mx-auto-view-btn:hover:not(.is-active) {
    background: var(--mx-surface-hover, #f1f5f9);
}

.mx-auto-designer__zoom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.mx-auto-designer__zoom-label {
    min-width: 44px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mx-text-muted);
}

.mx-auto-designer__canvas-stage {
    position: relative;
    width: 100%;
    min-width: 900px;
    transform-origin: top center;
}

.mx-auto-designer--flow .mx-auto-designer__canvas-wrap {
    background-color: var(--mx-surface-muted, #f1f5f9);
    background-image: none;
}

.mx-auto-designer__canvas--flow {
    min-height: 640px;
}

.mx-auto-flow-chrome {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    min-height: inherit;
}

.mx-auto-flow-add-wrap {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 32px;
    pointer-events: auto;
    transform: translateX(-50%);
}

.mx-auto-flow-add-wrap__line {
    display: block;
    width: 2px;
    height: 12px;
    background: var(--mx-primary, #0e4194);
    border-radius: 1px;
}

.mx-auto-flow-add {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--mx-primary, #0e4194);
    background: var(--mx-surface, #fff);
    color: var(--mx-primary, #0e4194);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgb(15 23 42 / 12%);
    padding: 0;
}

.mx-auto-flow-add:hover {
    background: var(--mx-primary, #0e4194);
    color: #fff;
}

.mx-auto-node__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.mx-auto-node__kind {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.9;
    line-height: 1.1;
}

.mx-auto-node--flow {
    width: 380px;
    cursor: pointer;
}

.mx-auto-node--flow .mx-auto-node__body {
    white-space: normal;
    line-height: 1.35;
}

.mx-auto-designer--flow .mx-auto-node__port--in,
.mx-auto-designer--flow .mx-auto-node__port--out {
    display: none;
}

.mx-auto-designer--flow .mx-auto-node:active {
    cursor: pointer;
}

.mx-auto-designer--flow .mx-auto-edge {
    stroke: var(--mx-primary, #0e4194);
    stroke-width: 2;
}

.mx-auto-add-step-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
    margin-top: 12px;
}

.mx-auto-add-step-item {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
}

/* AI Agent widget (Faz 1) */
.mx-ai-assistant {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1040;
}

.mx-ai-assistant__fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--mx-primary, #1d4ed8);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 10px 30px rgb(15 23 42 / 30%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mx-ai-assistant__fab:hover {
    filter: brightness(1.08);
}

.mx-ai-assistant__panel {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: min(360px, 90vw);
    height: min(480px, 70vh);
    background: var(--mx-surface, #fff);
    border: 1px solid var(--mx-border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgb(15 23 42 / 30%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mx-overlay-rise 0.15s ease-out;
}

/* [hidden] tarayici varsayilaninda display:none verir ama ayni ozgullukteki author
   kurali (display:flex yukarida) UA stilini her zaman ezer — bu yuzden panel kapanmiyordu.
   Acikca ezerek garanti altina aliyoruz. */
.mx-ai-assistant__panel[hidden] {
    display: none;
}

.mx-ai-assistant__header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--mx-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: var(--mx-surface-muted, #f8fafc);
}

.mx-ai-assistant__subtitle {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

.mx-ai-assistant__messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mx-ai-assistant__msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.mx-ai-assistant__msg--assistant {
    align-self: flex-start;
    background: var(--mx-surface-muted, #f1f5f9);
    color: var(--mx-text, #0f172a);
}

.mx-ai-assistant__msg--user {
    align-self: flex-end;
    background: var(--mx-primary, #1d4ed8);
    color: #fff;
}

.mx-ai-assistant__msg--thinking {
    opacity: 0.6;
    font-style: italic;
}

.mx-ai-assistant__composer {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--mx-border);
}

.mx-ai-assistant__composer .mx-input {
    flex: 1;
}

@keyframes mx-spin {
    to { transform: rotate(360deg); }
}

.mx-shipment-tracker {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.mx-shipment-tracker__step {
    flex: 1;
    text-align: center;
}

.mx-shipment-tracker__step-title {
    font-weight: 700;
    color: #2563eb;
}

.mx-shipment-tracker__step-title--success {
    color: #16a34a;
}

.mx-shipment-tracker__step-desc {
    font-size: 0.75rem;
    color: #64748b;
}

.mx-stat-card__val--danger {
    color: var(--mx-danger);
}

.mx-note-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.mx-note-list__item {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--mx-border);
    border-radius: 8px;
    background: var(--mx-surface);
}

.mx-note-list__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}

.mx-note-list__text {
    margin: 0;
    white-space: pre-wrap;
    color: var(--mx-text);
    line-height: 1.45;
}

/* Offers import customer picker */
.mx-scroll-list {
    max-height: min(40vh, 280px);
    overflow-y: auto;
    border: 1px solid var(--mx-border);
    border-radius: 10px;
    padding: 6px;
    background: #fff;
}

.mx-radio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    margin: 0;
}

.mx-radio-row:hover {
    background: var(--mx-surface-hover, #f8fafc);
}

.mx-radio-row.is-selected,
.mx-radio-row:has(input:checked) {
    background: #eff6ff;
    border-color: color-mix(in srgb, var(--mx-primary) 35%, #fff);
    box-shadow: inset 3px 0 0 var(--mx-primary);
}

.mx-radio-row__text {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.mx-radio-row__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mx-text-main);
    line-height: 1.3;
}

.mx-radio-row__meta {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--mx-text-muted);
    white-space: nowrap;
}

.mx-radio-row__text .mx-radio-row__meta {
    margin-left: 0;
}

.mx-table__empty--padded {
    padding: 16px 12px;
    margin: 8px 0 0;
}

.mx-overlay-dialog__hint {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
}

.mx-cargo-scan-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.mx-cargo-scan-bar .mx-form-group--grow {
    flex: 1 1 240px;
    margin-bottom: 0;
}

.mx-cargo-scan-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.mx-cargo-scan-stat {
    border: 1px solid var(--mx-border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--mx-surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mx-cargo-scan-stat span {
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

.mx-cargo-scan-stat strong {
    font-size: 1.125rem;
}

.mx-cargo-scan-stat.is-ok {
    border-color: #86efac;
    background: #f0fdf4;
}

.mx-cargo-scan-stat.is-warn {
    border-color: #fcd34d;
    background: #fffbeb;
}

/* Op barkod istasyonu (Sayım / Tartım) */
.mx-ops-station {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 16px;
    align-items: start;
}

.mx-ops-station--sayim {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(260px, 0.85fr);
}

.mx-ops-station__scan-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.mx-ops-station__scan-field {
    flex: 1 1 280px;
}

.mx-ops-station__hint {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mx-text-muted);
}

.mx-ops-station__side {
    display: grid;
    gap: 16px;
}

.mx-ops-station__active-meta {
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.mx-ops-station__queue {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow: auto;
}

.mx-ops-station__queue-item {
    border-bottom: 1px solid var(--mx-border);
}

.mx-ops-station__queue-item:last-child {
    border-bottom: 0;
}

.mx-ops-station__queue-item.is-active {
    background: color-mix(in srgb, var(--mx-primary) 8%, transparent);
}

.mx-ops-station__queue-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.mx-ops-station__queue-id {
    grid-column: 1;
    font-weight: 700;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8125rem;
}

.mx-ops-station__queue-cust {
    grid-column: 1;
    color: var(--mx-text-muted);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-ops-station__queue-btn .mx-badge {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

#sayimFilterOpen.is-active,
#sayimFilterAll.is-active {
    border-color: var(--mx-primary);
    color: var(--mx-primary);
    font-weight: 700;
}

.mx-cargo-scan-list--active {
    max-height: 420px;
    overflow: auto;
}

.mx-ops-station__recent {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow: auto;
}

.mx-ops-station__recent-empty {
    padding: 16px;
    color: var(--mx-text-muted);
    font-size: 0.875rem;
}

.mx-ops-station__recent-item {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mx-border);
    font-size: 0.8125rem;
    align-items: baseline;
}

.mx-ops-station__recent-item:last-child {
    border-bottom: 0;
}

.mx-ops-station__recent-item.is-ok {
    border-left: 3px solid var(--mx-success, #16a34a);
}

.mx-ops-station__recent-item.is-warn {
    border-left: 3px solid var(--mx-warning, #d97706);
}

.mx-ops-station__recent-item.is-error {
    border-left: 3px solid var(--mx-danger, #dc2626);
}

.mx-ops-station__recent-code {
    font-weight: 700;
    font-family: ui-monospace, Consolas, monospace;
    word-break: break-all;
}

.mx-ops-station__recent-msg {
    color: var(--mx-text-muted);
}

.mx-ops-station__recent-at {
    color: var(--mx-text-muted);
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .mx-ops-station--sayim {
        grid-template-columns: 1fr 1fr;
    }

    .mx-ops-station--sayim .mx-ops-station__side {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 960px) {
    .mx-ops-station {
        grid-template-columns: 1fr;
    }

    .mx-ops-station--sayim {
        grid-template-columns: 1fr;
    }

    .mx-ops-station--sayim .mx-ops-station__side {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
}

.mx-form-group--grow {
    flex: 1 1 auto;
}

.mx-btn--success {
    background: var(--mx-success);
    border-color: var(--mx-success);
    color: #fff;
}

.mx-btn--success:hover {
    filter: brightness(0.95);
    color: #fff;
}

.mx-input--lg {
    min-height: 42px;
    font-size: 1rem;
    padding: 8px 12px;
}

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

.mx-section-title,
.mirex-section-title {
    margin: 1rem 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mx-text-main);
}

.mx-page-shell,
.mirex-page-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.mx-page-header__content,
.mirex-page-header__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mx-table--bordered th,
.mx-table--bordered td,
.mx-doc-table th,
.mx-doc-table td {
    border: 1px solid var(--mx-border);
}

.mx-doc-table th {
    width: 32%;
    background: var(--mx-surface-hover);
    font-weight: 600;
    text-align: left;
}

.mx-doc-signature {
    margin-top: 1.5rem;
}

.mx-signature-line,
.mirex-signature-line {
    min-height: 64px;
    margin: 0.5rem 0;
    border-bottom: 1px solid var(--mx-border);
}

.mx-doc-declaration,
.mirex-delivery-declaration {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--mx-border);
    border-radius: 8px;
    background: var(--mx-surface-hover);
}

.no-print {
    margin-top: 12px;
}

@media print {
    .no-print {
        display: none !important;
    }

    .mx-sidebar,
    .mx-header,
    .mx-hub,
    .mx-tabs {
        display: none !important;
    }

    .mx-app-shell,
    .mx-content,
    .mx-module-content {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Courier map layout (was page <style> blocks) */
.mx-page-grid--map {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    align-items: start;
}

.courier-map--tall {
    height: 560px;
}

/* Tek sefer paneli: duraklar | harita */
.mx-sefer-kpi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.mx-sefer-kpi__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 88px;
    padding: 8px 12px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-md);
    background: var(--mx-surface-soft, #f8fafc);
}

.mx-sefer-kpi__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mx-text-muted);
}

.mx-sefer-kpi__val {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--mx-text-main);
    line-height: 1.2;
}

.mx-sefer-kpi__val--sm {
    font-size: 0.8125rem;
    font-weight: 600;
}

.mx-sefer-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1rem;
    align-items: stretch;
    min-height: 520px;
}

.mx-sefer-panel__stops,
.mx-sefer-panel__map {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mx-sefer-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.mx-sefer-add__no {
    flex: 1 1 180px;
}

.mx-sefer-add__sira {
    flex: 0 0 88px;
}

.mx-sefer-table-scroll {
    max-height: min(560px, 62vh);
    overflow: auto;
}

.mx-sefer-table tr.is-missing-coord td {
    background: rgb(234 179 8 / 6%);
}

.courier-map--sefer {
    height: min(560px, 62vh);
    min-height: 360px;
    border-radius: var(--mx-radius-md);
    border: 1px solid var(--mx-border);
}

.mx-mb-12 {
    margin-bottom: 12px;
}

@media (max-width: 1100px) {
    .mx-sefer-panel {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .courier-map--sefer {
        height: 380px;
        min-height: 280px;
    }
}

@media (max-width: 1100px) {
    .mx-page-grid--map {
        grid-template-columns: 1fr;
    }
}

/* Sefer Haritası board: liste | harita | durak şeridi */
.mx-route-board {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    grid-template-rows: minmax(420px, 1fr) auto;
    gap: 1rem;
    align-items: stretch;
}

.mx-route-board__list {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mx-route-board__list .mx-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    flex: 1;
}

.mx-route-board__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: auto;
    max-height: min(70vh, 720px);
}

.mx-route-board__item {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--mx-border);
    border-radius: 8px;
    border-left: 4px solid var(--route-color, var(--mx-primary));
    background: var(--mx-surface);
    cursor: pointer;
}

.mx-route-board__item.is-selected {
    background: color-mix(in srgb, var(--route-color, var(--mx-primary)) 8%, var(--mx-surface));
}

.mx-route-board__item.is-focused {
    box-shadow: inset 0 0 0 2px var(--route-color, var(--mx-primary));
}

.mx-route-board__focus {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.mx-route-board__create {
    border: 1px dashed var(--mx-border);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
}

.mx-route-board__create summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mx-primary);
}

.mx-route-timeline__row.is-focused {
    background: color-mix(in srgb, var(--route-color, var(--mx-primary)) 6%, transparent);
    border-radius: 6px;
}

.mx-route-timeline__focus {
    font-weight: 600;
}

.mx-route-timeline__empty {
    font-size: 0.75rem;
    color: var(--mx-text-muted);
    padding: 0 0.35rem;
}

.mx-mt-8 { margin-top: 0.5rem !important; }

.mx-route-board__swatch,
.mx-route-timeline__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--route-color, var(--mx-primary));
    flex-shrink: 0;
}

.mx-route-board__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mx-route-board__name {
    font-weight: 600;
    color: var(--mx-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mx-route-board__sub {
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

.mx-route-board__map {
    min-width: 0;
}

.courier-map--board {
    height: min(58vh, 560px);
    border-radius: 8px;
    border: 1px solid var(--mx-border);
}

.mx-route-board__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
}

.mx-route-board__timeline {
    grid-column: 2;
    min-width: 0;
}

.mx-route-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    overflow-x: auto;
}

.mx-route-timeline__row {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 0.75rem;
    align-items: center;
}

.mx-route-timeline__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    min-width: 0;
}

.mx-route-timeline__track {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0.25rem 0;
    overflow-x: auto;
}

.mx-route-timeline__node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.35rem;
    border-radius: 4px;
    background: var(--route-color, var(--mx-primary));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mx-route-timeline__node--home,
.mx-route-timeline__node--end {
    background: var(--mx-text-main);
}

.mx-route-timeline__node.is-missing {
    opacity: 0.45;
    outline: 1px dashed var(--mx-border);
}

.mx-route-color--0 { --route-color: var(--mx-primary); }
.mx-route-color--1 { --route-color: var(--mx-red-accent); }
.mx-route-color--2 { --route-color: #0f766e; }
.mx-route-color--3 { --route-color: #b45309; }
.mx-route-color--4 { --route-color: #7c3aed; }
.mx-route-color--5 { --route-color: #0369a1; }

.mx-filter-form--stack {
    flex-direction: column;
    align-items: stretch;
}

.mx-filter-form--stack > .mx-filter-actions {
    flex-flow: row nowrap;
    align-self: flex-start;
}

.mx-map-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: var(--mx-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
}

@media (max-width: 1100px) {
    .mx-route-board {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .mx-route-board__list,
    .mx-route-board__timeline {
        grid-row: auto;
        grid-column: auto;
    }

    .courier-map--board {
        height: 420px;
    }

    .mx-route-timeline__row {
        grid-template-columns: 1fr;
    }
}

/* Standalone courier manifest print (Layout = null) */
.mx-print-manifest {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    color: var(--mx-text-main, #111);
    margin: 0;
    padding: 10px;
}

.mx-print-manifest__toolbar {
    margin-bottom: 15px;
    background: var(--mx-surface-hover, #f8fafc);
    padding: 10px;
    border: 1px solid var(--mx-border, #cbd5e1);
    display: flex;
    gap: 10px;
}

.mx-print-manifest__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--mx-text-main, #000);
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.mx-print-manifest__brand {
    font-size: 16pt;
    font-weight: 700;
}

.mx-print-manifest__sub-brand {
    font-size: 10pt;
    color: var(--mx-text-muted, #555);
}

.mx-print-manifest__header-meta {
    text-align: right;
}

.mx-print-manifest__meta {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.mx-print-manifest__meta td {
    padding: 4px 8px;
    border: 1px solid var(--mx-border, #ccc);
    font-size: 10pt;
}

.mx-print-manifest__meta td:nth-child(odd) {
    width: 15%;
    background: var(--mx-surface-hover, #f2f2f2);
}

.mx-print-manifest__meta td:nth-child(even) {
    width: 35%;
}

.mx-print-manifest__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.mx-print-manifest__table th,
.mx-print-manifest__table td {
    border: 1px solid var(--mx-text-main, #000);
    padding: 6px 8px;
    text-align: left;
    font-size: 9.5pt;
}

.mx-print-manifest__table th {
    background-color: var(--mx-surface-hover, #f2f2f2);
    font-weight: 700;
}

.mx-print-manifest__table th:nth-child(1) { width: 4%; }
.mx-print-manifest__table th:nth-child(2) { width: 16%; }
.mx-print-manifest__table th:nth-child(3) { width: 25%; }
.mx-print-manifest__table th:nth-child(4) { width: 35%; }
.mx-print-manifest__table th:nth-child(5) { width: 20%; }

.mx-print-manifest__sig-cell {
    height: 35px;
    width: 120px;
}

.mx-print-manifest__empty {
    text-align: center;
    padding: 20px;
    color: var(--mx-text-muted, #666);
}

.mx-print-manifest__footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid var(--mx-border, #ccc);
}

.mx-print-manifest__sig-area {
    width: 45%;
    text-align: center;
    border: 1px dashed var(--mx-text-muted, #666);
    padding: 15px;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    .mx-print-manifest__toolbar {
        display: none !important;
    }
}

.mx-org-graph {
    display: grid;
    gap: 14px;
}

.mx-org-graph__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.mx-org-graph__toolbar-main {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
}

.mx-org-graph__toolbar-zoom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mx-org-graph__zoom-label {
    min-width: 3.2rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mx-text-muted);
}

.mx-org-graph__meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
}

.mx-org-graph__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--mx-border-light);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-primary-light);
}

.mx-org-graph__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

.mx-org-graph__swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1.5px solid var(--mx-border);
    background: var(--mx-surface);
}

.mx-org-graph__swatch--group {
    background: color-mix(in srgb, var(--mx-primary) 14%, var(--mx-surface));
    border-color: var(--mx-primary);
}

.mx-org-graph__swatch--default {
    background: color-mix(in srgb, var(--mx-red-accent) 12%, var(--mx-surface));
    border-color: var(--mx-red-accent);
}

.mx-org-graph__swatch--process {
    background: var(--mx-surface);
    border-color: var(--mx-border);
}

.mx-org-graph__canvas {
    --mx-org-zoom: 1;
    width: 100%;
    min-height: 480px;
    max-height: min(72vh, 820px);
    overflow: auto;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-xl);
    background-color: var(--mx-surface-hover);
    background-image:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--mx-primary) 14%, transparent) 1px, transparent 0),
        linear-gradient(180deg, color-mix(in srgb, var(--mx-primary) 6%, transparent), transparent 140px);
    background-size: 18px 18px, auto;
    padding: 8px;
}

.mx-org-graph__svg {
    display: block;
    min-width: 100%;
    transform: scale(var(--mx-org-zoom));
    transform-origin: 0 0;
    transition: transform 0.15s ease;
}

.mx-org-graph__edge {
    stroke: color-mix(in srgb, var(--mx-primary) 35%, var(--mx-border));
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mx-org-graph__arrow {
    fill: color-mix(in srgb, var(--mx-primary) 55%, var(--mx-border));
}

.mx-org-graph__node .mx-org-graph__card {
    fill: var(--mx-surface);
    stroke: var(--mx-border);
    stroke-width: 1.5;
}

.mx-org-graph__node .mx-org-graph__accent {
    fill: var(--mx-border);
}

.mx-org-graph__node--group .mx-org-graph__card {
    fill: color-mix(in srgb, var(--mx-primary) 10%, var(--mx-surface));
    stroke: var(--mx-primary);
    stroke-width: 2;
}

.mx-org-graph__node--group .mx-org-graph__accent {
    fill: var(--mx-primary);
}

.mx-org-graph__node--group.is-default .mx-org-graph__card {
    stroke: var(--mx-red-accent);
}

.mx-org-graph__node--group.is-default .mx-org-graph__accent {
    fill: var(--mx-red-accent);
}

.mx-org-graph__node--process .mx-org-graph__card {
    fill: var(--mx-surface);
    stroke: var(--mx-border);
}

.mx-org-graph__node--depth-1 .mx-org-graph__accent { fill: var(--mx-primary); }
.mx-org-graph__node--depth-2 .mx-org-graph__accent { fill: color-mix(in srgb, var(--mx-primary) 70%, var(--mx-red-accent)); }
.mx-org-graph__node--depth-3 .mx-org-graph__accent { fill: var(--mx-red-accent); }
.mx-org-graph__node--depth-4 .mx-org-graph__accent { fill: var(--mx-text-muted); }

.mx-org-graph__hit {
    cursor: pointer;
    text-decoration: none;
}

.mx-org-graph__hit:hover .mx-org-graph__card {
    stroke: var(--mx-primary);
    stroke-width: 2;
}

.mx-org-graph__hit:focus-visible .mx-org-graph__card {
    stroke: var(--mx-red-accent);
    stroke-width: 2.5;
}

.mx-org-graph__badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    fill: var(--mx-text-muted);
}

.mx-org-graph__title {
    font-size: 12.5px;
    font-weight: 700;
    fill: var(--mx-text-main);
}

.mx-org-graph__sub {
    font-size: 10px;
    fill: var(--mx-text-muted);
}

.mx-org-graph__node--group .mx-org-graph__badge {
    fill: var(--mx-primary);
}

.mx-org-graph__node--group.is-default .mx-org-graph__badge {
    fill: var(--mx-red-accent);
}

.mx-schema-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.mx-schema-kpi {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    border-left: 3px solid var(--mx-primary);
}

.mx-schema-kpi--accent {
    border-left-color: var(--mx-red-accent);
}

.mx-schema-kpi__value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mx-text-main);
}

.mx-schema-kpi__label {
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

.mx-schema-process-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mx-schema-process-tree__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mx-border-light);
}

.mx-schema-process-tree__item:last-child {
    border-bottom: 0;
}

.mx-schema-process-tree__main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    min-width: 0;
}

.mx-schema-process-tree__name {
    font-weight: 600;
    color: var(--mx-text-main);
}

.mx-schema-process-tree__meta {
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

.mx-schema-process-tree__item--depth-1 { padding-left: 28px; }
.mx-schema-process-tree__item--depth-2 { padding-left: 44px; }
.mx-schema-process-tree__item--depth-3 { padding-left: 60px; }
.mx-schema-process-tree__item--depth-4 { padding-left: 76px; }

.mx-view-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--mx-border);
    border-radius: 10px;
    background: var(--mx-surface, #fff);
}

.mx-view-toggle .mx-btn.is-active {
    background: var(--mx-primary);
    color: #fff;
    border-color: var(--mx-primary);
}

/* ===== Sevk workspace (Operations?screen=sevk) ===== */
.mx-sevk-workspace {
    display: grid;
    gap: 12px;
}

.mx-sevk-toolbar .mx-cargo-list-filters {
    gap: 10px;
}

.mx-sevk-toolbar__clear {
    align-self: flex-end;
    margin-bottom: 2px;
}

.mx-cargo-list-filters__row--bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--mx-border);
    background: #f8fafc;
    margin: 0 -16px -16px;
    padding: 10px 16px;
    border-radius: 0 0 10px 10px;
}

.mx-sevk-kpi {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.mx-sevk-kpi__item {
    appearance: none;
    border: 1px solid var(--mx-border);
    background: var(--mx-surface, #fff);
    border-radius: 10px;
    padding: 8px 14px;
    min-width: 88px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 2px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mx-sevk-kpi__item--static {
    cursor: default;
}

.mx-sevk-kpi__item:not(.mx-sevk-kpi__item--static):hover {
    border-color: var(--mx-primary);
}

.mx-sevk-kpi__item.is-active {
    border-color: var(--mx-primary);
    box-shadow: inset 3px 0 0 var(--mx-red-accent, var(--mx-red-accent));
    background: #f8fafc;
}

.mx-sevk-kpi__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mx-text-muted);
}

.mx-sevk-kpi__val {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mx-text-main);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.mx-sevk-kpi__meta {
    margin-left: auto;
    align-self: center;
    font-size: 0.75rem;
    color: var(--mx-text-muted);
    padding: 0 4px;
}

.mx-sevk-table-scroll {
    max-height: min(70vh, 720px);
}

.mx-sevk-table td,
.mx-sevk-table th {
    vertical-align: middle;
}

.mx-sevk-col-check {
    width: 40px;
}

.mx-sevk-irsaliye {
    font-weight: 700;
    font-size: 0.875rem;
}

.mx-sevk-customer {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-sevk-dest {
    display: block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.mx-sevk-status-select {
    min-width: 150px;
    max-width: 180px;
}

.mx-sevk-col-actions .mx-button-group {
    justify-content: flex-end;
}

.mx-sevk-col-price {
    min-width: 7.5rem;
    white-space: nowrap;
}

.mx-sevk-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

.mx-sevk-price__main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
}

.mx-sevk-price__val {
    font-variant-numeric: tabular-nums;
    color: var(--mx-text, #1f2937);
}

.mx-sevk-price__detail {
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--mx-text-muted);
    max-width: 14rem;
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 900px) {
    .mx-sevk-kpi__meta {
        width: 100%;
        margin-left: 0;
    }

    .mx-sevk-customer,
    .mx-sevk-dest {
        max-width: 120px;
    }
}

/* ETGB Op — detay KV + deeplink satır vurgusu */
.mx-table--kv .mx-kv-key {
    width: 35%;
    font-weight: 700;
    color: var(--mx-text-muted);
    vertical-align: top;
}

.mx-table tbody tr.is-focus {
    box-shadow: inset 3px 0 0 var(--mx-red-accent, var(--mx-red-accent));
    background: var(--mx-primary-light, #eff6ff);
}

/* Müşteri Excel şablonları — liste + düzenleyici */
.mx-excel-templates {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.mx-excel-templates__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 36rem;
    overflow: auto;
    padding-right: 0.25rem;
}

.mx-excel-templates__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--mx-border, #d7dee8);
    border-radius: 8px;
    background: var(--mx-surface, #fff);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

a.mx-excel-templates__item:hover {
    border-color: var(--mx-primary, var(--mx-primary));
    background: var(--mx-primary-light, #eff6ff);
}

.mx-excel-templates__item.is-active {
    border-color: var(--mx-primary, var(--mx-primary));
    box-shadow: inset 3px 0 0 var(--mx-red-accent, var(--mx-red-accent));
    background: var(--mx-primary-light, #eff6ff);
}

.mx-excel-templates__item-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--mx-text, #1a2332);
}

.mx-excel-templates__item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.78rem;
    color: var(--mx-text-muted, #64748b);
}

.mx-excel-templates__editor {
    min-width: 0;
    padding: 0.25rem 0 0;
}

@media (max-width: 900px) {
    .mx-excel-templates {
        grid-template-columns: 1fr;
    }

    .mx-excel-templates__list {
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mx-excel-templates__item {
        flex: 1 1 180px;
    }
}

.mx-module-backbar {
    margin-bottom: 0.5rem;
}

.mx-module-backbar:has(#mxNavBack[hidden]) {
    display: none;
}

.mx-sevk-more-tools {
    position: relative;
    display: inline-block;
}

.mx-sevk-more-tools[open] {
    z-index: 30;
}

.mx-sevk-more-tools > summary {
    list-style: none;
    cursor: pointer;
}

.mx-sevk-more-tools > summary::-webkit-details-marker {
    display: none;
}

.mx-sevk-more-tools__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 20;
    min-width: 11rem;
    padding: 0.5rem;
    background: var(--mx-surface, #fff);
    border: 1px solid var(--mx-border, #e2e8f0);
    border-radius: var(--mx-radius-sm, 6px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

/* display:flex yalnizca acikken — aksi halde details kapali durumu ezilir, menu acilmaz/gorunmez kalir */
.mx-sevk-more-tools[open] > .mx-sevk-more-tools__menu {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mx-sevk-toolbar.mx-card,
.mx-cargo-list-filters__row--bulk {
    overflow: visible;
}

@media (max-width: 640px) {
    .mx-bulk-toolbar--sticky-mobile:not([hidden]) .mx-sevk-more-tools__menu {
        top: auto;
        bottom: calc(100% + 0.25rem);
    }
}

.mx-sevk-col-actions .mx-sevk-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Fatura Eşleştirme */
.mx-invoice-match__intro .mx-card__header {
    align-items: flex-start;
}

.mx-invoice-match__intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.mx-invoice-match__steps {
    margin-bottom: 20px;
}

.mx-step-strip__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    text-align: left;
}

.mx-invoice-match__modal-steps {
    margin-bottom: 16px;
}

.mx-invoice-match__modal-steps .mx-step-strip__item.is-active .mx-step-strip__panel {
    border-color: var(--mx-primary);
    box-shadow: inset 3px 0 0 var(--mx-red-accent);
    background: var(--mx-surface-hover);
}

.mx-invoice-match__modal-steps .mx-step-strip__item.is-complete .mx-step-strip__panel {
    border-left: 3px solid var(--mx-success);
}

.mx-invoice-match__steps .mx-step-strip__item.is-active .mx-step-strip__panel {
    border-color: var(--mx-primary);
    box-shadow: inset 3px 0 0 var(--mx-red-accent);
}

.mx-invoice-match__summary {
    margin-bottom: 0;
}

.mx-invoice-match__stat .mx-stat-card__val--danger {
    color: var(--mx-danger);
}

.mx-invoice-match__stat .mx-stat-card__val--success {
    color: var(--mx-success);
}

.mx-invoice-match__filter-card .mx-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mx-invoice-match__filter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.mx-invoice-match__filter-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mx-text-main);
}

.mx-invoice-match__val--success {
    color: var(--mx-success);
}

.mx-invoice-match__val--warning {
    color: var(--mx-warning, #b45309);
}

.mx-invoice-match__val--danger {
    color: var(--mx-danger);
}

.mx-invoice-match__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

.mx-invoice-match__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mx-invoice-match__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.mx-invoice-match__swatch--ok {
    background: var(--mx-text-muted);
}

.mx-invoice-match__swatch--warn {
    background: var(--mx-warning, #b45309);
}

.mx-invoice-match__swatch--high {
    background: var(--mx-danger);
}

.mx-invoice-match__toolbar-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.mx-invoice-match__toolbar-field--grow {
    flex: 1 1 12rem;
    min-width: 10rem;
}

.mx-invoice-match__toolbar-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mx-text-muted);
}

.mx-invoice-match__file-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 120px;
    padding: 20px 16px;
    border: 2px dashed var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface-hover);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.mx-invoice-match__file-zone:hover,
.mx-invoice-match__file-zone:focus-visible {
    border-color: var(--mx-primary);
    background: color-mix(in srgb, var(--mx-primary) 4%, var(--mx-surface));
    outline: none;
}

.mx-invoice-match__file-zone.is-dragover {
    border-color: var(--mx-primary);
    background: color-mix(in srgb, var(--mx-primary) 8%, var(--mx-surface));
}

.mx-invoice-match__file-zone.is-set {
    border-style: solid;
    border-color: var(--mx-success);
    background: color-mix(in srgb, var(--mx-success) 6%, var(--mx-surface));
}

.mx-invoice-match__file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.mx-invoice-match__file-zone-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mx-text-main);
}

.mx-invoice-match__table-scroll {
    max-height: min(65vh, 640px);
    overflow: auto;
}

.mx-invoice-match__hint {
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.mx-invoice-match__hint code {
    font-size: 0.8125rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--mx-surface-hover, #f1f5f9);
    border: 1px solid var(--mx-border);
}

.mx-invoice-match__file-name {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
}

.mx-invoice-match__file-name--set {
    color: var(--mx-text);
    font-weight: 500;
}

.mx-invoice-match__results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.mx-invoice-match__kpi {
    margin-bottom: 0;
}

.mx-invoice-match__meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
}

.mx-invoice-match__toolbar {
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.mx-invoice-match__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mx-invoice-match__search {
    min-width: 14rem;
    max-width: 22rem;
}

.mx-invoice-match__empty {
    padding: 2rem 1rem;
}

.mx-invoice-match__row--unmatched {
    background: color-mix(in srgb, var(--mx-warning, #f59e0b) 6%, transparent);
}

.mx-invoice-match__diff--ok {
    color: var(--mx-text-muted);
}

.mx-invoice-match__diff--warn {
    color: var(--mx-warning, #b45309);
    font-weight: 600;
}

.mx-invoice-match__diff--high {
    color: var(--mx-danger, #dc2626);
    font-weight: 600;
}

.mx-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mx-table__sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.mx-table__sortable:hover {
    color: var(--mx-primary);
}

.mx-table__sortable.is-sorted::after {
    content: ' ▾';
    font-size: 0.75em;
    opacity: 0.7;
}

.mx-link {
    color: var(--mx-primary);
    text-decoration: none;
    font-weight: 500;
}

.mx-link:hover {
    text-decoration: underline;
}

/* —— Kargo etiket tasarımcısı (müşteri Tipler) —— */
.mx-label-designer {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 960px) {
    .mx-label-designer {
        grid-template-columns: 1fr;
    }
}

.mx-label-designer__fields {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-md);
    background: var(--mx-surface);
}

.mx-label-designer__fields legend {
    padding: 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mx-text-muted);
}

.mx-label-designer__fields--carrier legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8125rem;
}

.mx-label-designer__carrier-hint {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
}

.mx-label-designer__preview {
    position: sticky;
    top: 1rem;
}

.mx-label-mock {
    aspect-ratio: 1 / 1;
    max-width: 320px;
    margin-inline: auto;
    padding: 0.65rem;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    background: #fff;
    box-shadow: 0 1px 0 var(--mx-border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: var(--mx-text-main);
}

.mx-label-mock__header {
    display: grid;
    grid-template-columns: 48px 1fr 40px;
    gap: 0.35rem;
    align-items: center;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--mx-primary);
}

.mx-label-mock[data-logo="none"] .mx-label-mock__header {
    grid-template-columns: 1fr 40px;
}

.mx-label-mock[data-logo="none"] .mx-label-mock__logo {
    display: none;
}

.mx-label-mock__logo {
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--mx-border);
    border-radius: var(--mx-radius-sm);
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--mx-primary);
    background: var(--mx-surface-hover, #f8fafc);
}

.mx-label-mock__brand {
    text-align: center;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--mx-primary);
}

.mx-label-mock__piece {
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1.5px solid var(--mx-text-main);
    border-radius: 2px;
    padding: 0.15rem 0;
}

.mx-label-mock__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 0;
}

.mx-label-mock__body p {
    margin: 0;
    line-height: 1.25;
}

.mx-label-mock__codes {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.35rem 0;
    border-top: 1px dashed var(--mx-border);
    border-bottom: 1px dashed var(--mx-border);
}

.mx-label-mock__barcode {
    flex: 1;
    height: 28px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--mx-text-main) 0 2px,
            transparent 2px 4px
        );
    border-radius: 2px;
}

.mx-label-mock[data-barcode="small"] .mx-label-mock__barcode { height: 18px; }
.mx-label-mock[data-barcode="medium"] .mx-label-mock__barcode { height: 28px; }
.mx-label-mock[data-barcode="large"] .mx-label-mock__barcode { height: 40px; }

.mx-label-mock__qr {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background:
        linear-gradient(var(--mx-text-main) 0 0) 0 0 / 40% 40%,
        linear-gradient(var(--mx-text-main) 0 0) 100% 0 / 40% 40%,
        linear-gradient(var(--mx-text-main) 0 0) 0 100% / 40% 40%,
        linear-gradient(var(--mx-border) 0 0);
    background-repeat: no-repeat;
    border: 1px solid var(--mx-border);
}

.mx-label-mock[data-barcode="small"] .mx-label-mock__qr { width: 32px; height: 32px; }
.mx-label-mock[data-barcode="large"] .mx-label-mock__qr { width: 48px; height: 48px; }

.mx-label-mock__code-text,
.mx-label-mock__date {
    margin: 0;
    text-align: center;
    font-weight: 700;
    font-size: 0.65rem;
}

.mx-label-mock__date {
    font-weight: 500;
    border-top: 1px solid var(--mx-border);
    padding-top: 0.25rem;
}

.mx-text-danger {
    color: var(--mx-danger, #dc2626) !important;
}

/* Teslimat kaniti (POD) modal + imza pedi — Kurye Faz1 */
.mx-flex-nowrap {
    flex-wrap: nowrap;
}

.mx-btn--outline {
    background: transparent;
    border: 1px solid var(--mx-border);
    color: var(--mx-text);
}

.mx-btn--outline:hover {
    background: var(--mx-surface-alt, #f3f5f8);
}

.mx-form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mx-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.mx-modal-overlay[hidden] {
    display: none;
}

.mx-modal {
    background: var(--mx-surface, #ffffff);
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.mx-modal--sm {
    max-width: 480px;
}

.mx-quicksearch-modal > .mx-modal {
    max-width: 600px;
    padding: 0;
}

.mx-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mx-border);
}

.mx-modal__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.mx-modal__close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--mx-text-muted, #64748b);
    padding: 4px 8px;
}

.mx-modal__body {
    padding: 20px;
}

.mx-signature-pad {
    border: 1px dashed var(--mx-border);
    border-radius: 8px;
    background: #ffffff;
    display: inline-block;
    touch-action: none;
}

.mx-signature-pad canvas {
    display: block;
    max-width: 100%;
    cursor: crosshair;
    border-radius: 8px;
}

.mx-proof-preview {
    display: block;
    max-width: 160px;
    max-height: 120px;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid var(--mx-border);
    object-fit: cover;
}

@media (prefers-color-scheme: dark) {
    .mx-modal {
        background: var(--mx-surface, #1e293b);
    }

    .mx-signature-pad {
        background: #ffffff;
    }
}

/* ============================================================================
   Excel sablon editoru — onizleme + eslestirme TEK TABLO
   Baslik satirinin kendisi dropdown'lardan olusur; altinda gercek veri durur.
   ============================================================================ */
.mx-excel-preview-scroll {
    max-height: 55vh;
    overflow: auto;
}

.mx-excel-preview-table {
    font-size: 0.8125rem;
}

/* Excel'in kendi basligi — referans satiri, en ustte yapisik. */
.mx-excel-preview-table .mx-excel-preview__srcrow th {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--mx-surface-hover);
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    color: var(--mx-text-muted);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Eslestirme satiri — referans satirinin hemen altina yapisir. */
.mx-excel-preview-table .mx-excel-preview__maprow th {
    position: sticky;
    top: var(--mx-excel-srcrow-h, 30px);
    z-index: 11;
    background: var(--mx-surface);
    border-bottom: 2px solid var(--mx-primary-border);
    padding: 5px 6px;
}

.mx-excel-preview-table .excel-map-select {
    width: 100%;
    min-width: 150px;
    height: 30px;
    font-size: 0.75rem;
    padding: 0 6px;
}

/* Ayni sistem alanina birden fazla sutun secilmis — kullanici gorsun. */
.mx-excel-preview-table .excel-map-select.is-duplicate {
    border-color: var(--mx-warning);
    background: var(--mx-warning-light);
}

.mx-excel-preview-table tbody td {
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mx-text-muted);
}

/* ============================================================================
   mx-table dinamik sutun/filtre/siralama motoru (mx-table-enhance.js)
   Tum modullerde gorunur. Mevcut Mirex temasina (royal blue, ince kenarlik,
   yumusak gri-mavi yuzeyler, kucuk harf-aralikli etiketler) sadik kalir —
   yeni renk/gölge dili GETIRMEZ, var olan degiskenleri kullanir.
   ============================================================================ */
.mx-table-enhance-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 7px 12px;
    background: var(--mx-surface-hover);
    border: 1px solid var(--mx-border-light);
    border-bottom: none;
    border-radius: var(--mx-radius-md) var(--mx-radius-md) 0 0;
}

/* Tablo, araç çubugunun hemen altinda basliyorsa aradaki cift kenarlik/kose
   yuvarlamasi kirik gorunur — birlesik tek bir blok gibi dursun. */
.mx-table-enhance-toolbar + .mx-table-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* .mx-btn "display: inline-flex" tanimladigi icin tarayicinin [hidden] kurali
   (display:none) ezilir — buton gizlenmez. Arac cubugundaki gizlenebilir
   ogeler icin acikca bastiriyoruz. */
.mx-table-enhance-toolbar [hidden] {
    display: none !important;
}

.mx-table-enhance-count {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mx-text-muted);
    font-variant-numeric: tabular-nums;
}

.mx-table-enhance-coltoggle {
    position: relative;
}

.mx-table-enhance-colmenu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 60;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    box-shadow: var(--mx-shadow-lg, 0 10px 28px rgba(14, 65, 148, 0.16));
    padding: 6px;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
}

/* .mx-checkbox her ogeye kenarlik + 8px padding veriyor; acilir menude bu
   "kutu icinde kutu" gorunumu yaratiyordu — menu ogesi olarak sadelestiriyoruz. */
.mx-table-enhance-colmenu .mx-table-enhance-colmenu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--mx-text-main);
    border: none;
    border-radius: var(--mx-radius-sm);
    cursor: pointer;
}

.mx-table-enhance-colmenu__item:hover {
    background: var(--mx-primary-light);
}

/* Siralanabilir baslik: ok isareti sabit bir alanda durur, boylece siralama
   degisince sutun genisligi zıplamaz. */
th.mx-table-enhance-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px !important;
}

th.mx-table-enhance-sortable:hover {
    color: var(--mx-primary);
}

th.mx-table-enhance-sortable::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-bottom: 4px solid var(--mx-border);
    opacity: 0;
    transition: opacity 0.15s ease;
}

th.mx-table-enhance-sortable:hover::after {
    opacity: 1;
}

th.mx-table-enhance-sortable[data-sort="asc"]::after {
    opacity: 1;
    border-bottom: 4px solid var(--mx-primary);
}

th.mx-table-enhance-sortable[data-sort="desc"]::after {
    opacity: 1;
    border-bottom: none;
    border-top: 4px solid var(--mx-primary);
}

/* DIKKAT: .mx-table thead th zaten "position: sticky; top: 0" — filtre satiri
   da thead icinde oldugu icin, ek onlem alinmazsa tablo kaydirilinca baslik
   satiriyla UST USTE BINER. Filtre satirinin top degeri, baslik satirinin
   gercek yuksekligine gore JS tarafindan (--mx-filterrow-top) atanir. */
/* Secicinin ozgullugu ".mx-table thead th" (0,1,2) kuralini GECMELI — aksi halde
   oradaki "top: 0" kazanir ve filtre satiri baslik satirinin altina biner. */
.mx-table thead tr.mx-table-enhance-filterrow th {
    top: var(--mx-filterrow-top, 34px);
    z-index: 9;
    padding: 5px 8px;
    background: var(--mx-surface);
    border-bottom: 1px solid var(--mx-border);
}

.mx-table-enhance-filterinput {
    width: 100%;
    min-width: 60px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.75rem;
    padding: 4px 8px;
    border: 1px solid var(--mx-border-light);
    border-radius: var(--mx-radius-sm);
    background: var(--mx-surface-hover);
    color: var(--mx-text-main);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.mx-table-enhance-filterinput::placeholder {
    color: var(--mx-text-light);
}

.mx-table-enhance-filterinput:hover {
    border-color: var(--mx-border);
}

.mx-table-enhance-filterinput:focus {
    outline: none;
    background: var(--mx-surface);
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 2px var(--mx-primary-light);
}

/* Aktif filtresi olan sutun gozle secilebilsin. */
.mx-table-enhance-filterinput.is-active {
    background: var(--mx-surface);
    border-color: var(--mx-primary-border);
    font-weight: 600;
}

@media (max-width: 640px) {
    .mx-table-enhance-toolbar {
        padding: 6px 8px;
    }

    .mx-table-enhance-count {
        width: 100%;
        margin-left: 0;
    }
}

/* ---- Depo & Stok (WMS) — IKEA referans düzeni, Mirex token ---- */
.mx-wh-pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin: 12px 0 20px;
}

.mx-wh-pool-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    padding: 10px;
    color: inherit;
    text-decoration: none;
    min-height: 168px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mx-wh-pool-card:hover {
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 1px var(--mx-primary-light);
}

.mx-wh-pool-card--empty {
    border-color: color-mix(in srgb, var(--mx-success, #16a34a) 45%, var(--mx-border));
}

.mx-wh-pool-card--low {
    border-color: color-mix(in srgb, var(--mx-primary) 35%, var(--mx-border));
}

.mx-wh-pool-card--plan {
    border-color: color-mix(in srgb, var(--mx-warning, #d97706) 55%, var(--mx-border));
}

.mx-wh-pool-card--full {
    border-color: color-mix(in srgb, var(--mx-red-accent) 65%, var(--mx-border));
}

.mx-wh-pool-card__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.mx-wh-pool-card__title {
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.mx-wh-pool-card__vol-badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--mx-radius-sm, 4px);
    border: 1px solid var(--mx-border);
    background: var(--mx-surface-hover);
    color: var(--mx-text-main);
}

.mx-wh-pool-card--full .mx-wh-pool-card__vol-badge {
    border-color: color-mix(in srgb, var(--mx-red-accent) 40%, var(--mx-border));
    color: var(--mx-red-accent);
    background: color-mix(in srgb, var(--mx-red-accent) 8%, var(--mx-surface));
}

.mx-wh-pool-card--plan .mx-wh-pool-card__vol-badge {
    border-color: color-mix(in srgb, var(--mx-warning, #d97706) 40%, var(--mx-border));
    color: var(--mx-warning, #b45309);
}

.mx-wh-pool-card__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 6px;
    border-radius: var(--mx-radius-sm, 4px);
    border: 1px solid var(--mx-border);
    background: var(--mx-surface-hover);
    color: var(--mx-text-main);
}

.mx-wh-pool-card--empty .mx-wh-pool-card__status {
    background: color-mix(in srgb, var(--mx-success, #16a34a) 10%, var(--mx-surface));
    border-color: color-mix(in srgb, var(--mx-success, #16a34a) 30%, var(--mx-border));
    color: var(--mx-success, #15803d);
}

.mx-wh-pool-card--low .mx-wh-pool-card__status {
    background: color-mix(in srgb, var(--mx-primary) 8%, var(--mx-surface));
    border-color: color-mix(in srgb, var(--mx-primary) 25%, var(--mx-border));
    color: var(--mx-primary);
}

.mx-wh-pool-card--plan .mx-wh-pool-card__status {
    background: color-mix(in srgb, var(--mx-warning, #d97706) 12%, var(--mx-surface));
    border-color: color-mix(in srgb, var(--mx-warning, #d97706) 35%, var(--mx-border));
    color: var(--mx-warning, #b45309);
}

.mx-wh-pool-card--full .mx-wh-pool-card__status {
    background: color-mix(in srgb, var(--mx-red-accent) 10%, var(--mx-surface));
    border-color: color-mix(in srgb, var(--mx-red-accent) 35%, var(--mx-border));
    color: var(--mx-red-accent);
    animation: mx-wh-pulse 1.4s ease-in-out infinite;
}

@keyframes mx-wh-pulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mx-red-accent) 25%, transparent); }
}

.mx-wh-pool-card__reserve {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: var(--mx-radius-sm, 4px);
    background: color-mix(in srgb, var(--mx-warning, #d97706) 10%, var(--mx-surface));
    border: 1px solid color-mix(in srgb, var(--mx-warning, #d97706) 30%, var(--mx-border));
    color: var(--mx-warning, #b45309);
}

.mx-wh-pool-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.mx-wh-pool-card__stat {
    background: var(--mx-surface-hover);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm, 4px);
    padding: 4px 6px;
}

.mx-wh-pool-card__stat span {
    display: block;
    font-size: 0.6rem;
    color: var(--mx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mx-wh-pool-card__stat strong {
    font-size: 0.72rem;
    color: var(--mx-text-main);
}

.mx-wh-pool-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    margin-top: 2px;
    border-top: 1px solid var(--mx-border);
}

.mx-wh-pool-card__cta {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mx-primary);
}

.mx-wh-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
    padding: 8px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
}

.mx-wh-filter__pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--mx-border);
    background: var(--mx-surface-hover);
    color: var(--mx-text-main);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.mx-wh-filter__pill:hover {
    border-color: var(--mx-primary);
    color: var(--mx-primary);
}

.mx-wh-filter__pill.is-active {
    background: var(--mx-primary);
    border-color: var(--mx-primary);
    color: #fff;
}

.mx-wh-scan {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mx-wh-scan .mx-input--lg {
    min-height: 48px;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
}

.mx-wh-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.mx-wh-doc-card.is-active {
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 1px var(--mx-primary-light);
}

.mx-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.mx-kpi-strip--warehouse {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.mx-kpi-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    padding: 12px;
}

.mx-kpi-card--tone-primary { border-top: 3px solid var(--mx-primary); }
.mx-kpi-card--tone-success { border-top: 3px solid var(--mx-success, #16a34a); }
.mx-kpi-card--tone-warning { border-top: 3px solid var(--mx-warning, #d97706); }
.mx-kpi-card--tone-info { border-top: 3px solid var(--mx-info, #0284c7); }
.mx-kpi-card--tone-accent { border-top: 3px solid var(--mx-red-accent); }

.mx-kpi-card__label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mx-text-muted);
    margin-bottom: 4px;
}

.mx-kpi-card__value {
    font-size: 1.15rem;
    color: var(--mx-text-main);
}

.mx-progress {
    height: 6px;
    background: var(--mx-surface-hover);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--mx-border);
}

.mx-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--mx-primary);
    border-radius: 999px;
}

.mx-progress--empty .mx-progress__bar { background: var(--mx-success, #16a34a); }
.mx-progress--low .mx-progress__bar { background: var(--mx-primary); }
.mx-progress--plan .mx-progress__bar { background: var(--mx-warning, #d97706); }
.mx-progress--full .mx-progress__bar { background: var(--mx-red-accent); }

.mx-progress[data-pct="0"] .mx-progress__bar { width: 0%; }
.mx-progress[data-pct="5"] .mx-progress__bar { width: 5%; }
.mx-progress[data-pct="10"] .mx-progress__bar { width: 10%; }
.mx-progress[data-pct="15"] .mx-progress__bar { width: 15%; }
.mx-progress[data-pct="20"] .mx-progress__bar { width: 20%; }
.mx-progress[data-pct="25"] .mx-progress__bar { width: 25%; }
.mx-progress[data-pct="30"] .mx-progress__bar { width: 30%; }
.mx-progress[data-pct="35"] .mx-progress__bar { width: 35%; }
.mx-progress[data-pct="40"] .mx-progress__bar { width: 40%; }
.mx-progress[data-pct="45"] .mx-progress__bar { width: 45%; }
.mx-progress[data-pct="50"] .mx-progress__bar { width: 50%; }
.mx-progress[data-pct="55"] .mx-progress__bar { width: 55%; }
.mx-progress[data-pct="60"] .mx-progress__bar { width: 60%; }
.mx-progress[data-pct="65"] .mx-progress__bar { width: 65%; }
.mx-progress[data-pct="70"] .mx-progress__bar { width: 70%; }
.mx-progress[data-pct="75"] .mx-progress__bar { width: 75%; }
.mx-progress[data-pct="80"] .mx-progress__bar { width: 80%; }
.mx-progress[data-pct="85"] .mx-progress__bar { width: 85%; }
.mx-progress[data-pct="90"] .mx-progress__bar { width: 90%; }
.mx-progress[data-pct="95"] .mx-progress__bar { width: 95%; }
.mx-progress[data-pct="100"] .mx-progress__bar { width: 100%; }

.mx-file-btn {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.mx-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.mx-row--done {
    opacity: 0.65;
}

.mx-field--grow {
    flex: 1;
    min-width: 180px;
}

/* ==========================================
   Slide-Over Side Drawer (.mx-drawer)
   ========================================== */
.mx-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.mx-drawer-backdrop.is-open {
    opacity: 1;
}

.mx-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(540px, 92vw);
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    z-index: 1051;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.mx-drawer__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mx-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
}

.mx-drawer__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
    color: var(--mx-text-main);
}

.mx-drawer__subtitle {
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
    margin: 4px 0 0 0;
}

.mx-drawer__close {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mx-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.mx-drawer__close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mx-text-main);
}

.mx-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.mx-drawer__footer {
    padding: 14px 20px;
    border-top: 1px solid var(--mx-border);
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ==========================================
   Depo & Kiosk Zen Overlay (.mx-kiosk-overlay)
   ========================================== */
.mx-kiosk-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #0f172a;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.mx-kiosk-overlay[hidden] {
    display: none !important;
}

.mx-kiosk__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.mx-kiosk__title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--mx-chrome-muted);
    margin: 0;
}

.mx-kiosk__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
}

.mx-kiosk__display {
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    font-family: monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px 40px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    width: min(800px, 90vw);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mx-kiosk__flash--success {
    animation: mx-kiosk-pulse-success 0.4s ease-out;
}

.mx-kiosk__flash--error {
    animation: mx-kiosk-pulse-error 0.4s ease-out;
}

@keyframes mx-kiosk-pulse-success {
    0% { background: rgba(34, 197, 94, 0.4); }
    100% { background: rgba(255, 255, 255, 0.05); }
}

@keyframes mx-kiosk-pulse-error {
    0% { background: rgba(239, 68, 68, 0.4); }
    100% { background: rgba(255, 255, 255, 0.05); }
}

/* ==========================================
   Stacked Toast Notification Layer (.mx-toast-stack)
   ========================================== */
.mx-toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    pointer-events: none;
}

.mx-toast-item {
    pointer-events: auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    border-left: 4px solid var(--mx-primary);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: mx-toast-slide-in 0.25s ease-out;
    transition: opacity 0.2s ease;
}

.mx-toast-item--success { border-left-color: #22c55e; }
.mx-toast-item--error { border-left-color: #ef4444; }
.mx-toast-item--warning { border-left-color: #f59e0b; }

@keyframes mx-toast-slide-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


.mx-field--actions {
    display: flex;
    align-items: flex-end;
}

/* ==========================================
   Saved Filter Views (.mx-saved-views)
   ========================================== */
.mx-saved-views {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
}

.mx-saved-views__list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mx-saved-views__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mx-text-muted);
    margin-right: 4px;
}

.mx-saved-views__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--mx-border);
    font-size: 0.8125rem;
}

.mx-saved-views__item.is-active {
    border-color: var(--mx-primary);
    background: #eff6ff;
    font-weight: 600;
}

.mx-saved-views__link {
    color: var(--mx-text-main);
    text-decoration: none;
}

.mx-saved-views__del {
    border: 0;
    background: transparent;
    color: var(--mx-text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

.mx-saved-views__del:hover {
    color: #ef4444;
}

/* ==========================================
   Keyboard Table Row Focus (.mx-table-row--focused)
   ========================================== */
.mx-table tbody tr.mx-table-row--focused {
    outline: 2px solid var(--mx-primary);
    outline-offset: -2px;
    background-color: #f0f7ff !important;
}

/* ==========================================
   Drag-and-Drop Dropzone Upload (.mx-dropzone)
   ========================================== */
.mx-dropzone {
    border: 2px dashed var(--mx-border);
    border-radius: var(--mx-radius-md, 10px);
    padding: 20px 16px;
    text-align: center;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mx-dropzone:hover, .mx-dropzone.is-dragover {
    border-color: var(--mx-primary);
    background: #eff6ff;
}

.mx-dropzone__icon {
    font-size: 1.75rem;
}

.mx-dropzone__text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mx-text-main);
}

.mx-dropzone__filename {
    font-size: 0.8125rem;
    color: var(--mx-primary);
    font-weight: 700;
    margin-top: 4px;
}

/* Permissions Matrix UX Enhancements */
.mx-perm-toolbar {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--mx-border, #e2e8f0);
}

.mx-schema-process-tree__item--depth-0 {
    border-left: 3px solid var(--mx-primary, #0284c7);
}

.mx-schema-process-tree__item--depth-1 {
    border-left: 3px solid var(--mx-success, #16a34a);
    margin-left: 12px;
}

.mx-schema-process-tree__item--depth-2 {
    border-left: 3px solid var(--mx-warning, #d97706);
    margin-left: 24px;
}

.mx-schema-process-tree__item--depth-3 {
    border-left: 3px solid var(--mx-accent, #8b5cf6);
    margin-left: 36px;
}

/* Yetki grubu menü önizleme (/Users/Groups) */
.mx-permission-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.mx-permission-preview__title {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mx-text-muted);
}

.mx-permission-preview__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mx-permission-preview__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--mx-border);
}

.mx-permission-preview__item.is-hidden .mx-permission-preview__label {
    color: var(--mx-text-muted);
}

.mx-permission-preview__label {
    font-size: 0.875rem;
}

/* Bildirim kanalı durum şeridi (Entegrasyon / Otomasyon) */
.mx-channel-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.mx-channel-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
}

.mx-channel-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mx-channel-card__title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mx-text);
}

.mx-channel-card__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--mx-text-muted);
    flex: 1;
}

/* Müşteri tarife kurulum adımları */
.mx-step-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.mx-step-strip__item {
    flex: 1 1 160px;
    min-width: 0;
}

.mx-step-strip__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    color: var(--mx-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mx-step-strip__btn:hover {
    border-color: var(--mx-primary);
}

.mx-step-strip__item.is-active .mx-step-strip__btn {
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 1px var(--mx-primary);
}

.mx-step-strip__item.is-complete .mx-step-strip__btn {
    border-left: 3px solid var(--mx-success, #16a34a);
}

.mx-step-strip__num {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mx-text-muted);
}

.mx-step-strip__label {
    font-size: 0.875rem;
    font-weight: 600;
}

.mx-step-strip__hint {
    font-size: 0.75rem;
    color: var(--mx-text-muted);
    line-height: 1.3;
}

.mx-step-strip__btn--link {
    text-decoration: none;
    color: inherit;
}

/* Müşteri kurallar — yol haritası ve kart görünümü */
.mx-rule-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

@media (max-width: 960px) {
    .mx-rule-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mx-rule-kpi {
    padding: 12px 14px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mx-rule-kpi--primary {
    border-color: var(--mx-primary);
    box-shadow: inset 3px 0 0 var(--mx-primary);
}

.mx-rule-kpi__value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--mx-text);
    line-height: 1.1;
}

.mx-rule-kpi__label {
    font-size: 0.75rem;
    color: var(--mx-text-muted);
    line-height: 1.3;
}

.mx-rule-kpi--link {
    justify-content: center;
}

.mx-rule-kpi__link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mx-primary);
    text-decoration: none;
}

.mx-rule-kpi__link:hover {
    text-decoration: underline;
}

.mx-rule-map {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface-muted, #f8fafc);
}

.mx-rule-map__node {
    flex: 1 1 120px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    color: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mx-rule-map__node:hover {
    border-color: var(--mx-primary);
}

.mx-rule-map__node.is-complete {
    border-left: 3px solid var(--mx-success, #16a34a);
}

.mx-rule-map__node.is-active {
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 1px var(--mx-primary);
}

.mx-rule-map__node.is-pending {
    opacity: 0.88;
}

.mx-rule-map__node.is-link {
    border-style: dashed;
}

.mx-rule-map__icon {
    font-size: 1.125rem;
    line-height: 1;
}

.mx-rule-map__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--mx-text);
}

.mx-rule-map__meta {
    font-size: 0.6875rem;
    color: var(--mx-text-muted);
    line-height: 1.3;
}

.mx-rule-map__arrow {
    align-self: center;
    color: var(--mx-text-muted);
    font-size: 0.875rem;
    flex: 0 0 auto;
    padding: 0 2px;
}

@media (max-width: 900px) {
    .mx-rule-map__arrow {
        display: none;
    }
}

.mx-rule-group {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface);
    transition: box-shadow 0.15s;
}

.mx-rule-group--focused {
    box-shadow: 0 0 0 2px rgb(14 65 148 / 18%);
    border-color: var(--mx-primary);
}

.mx-rule-group__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.mx-rule-group__title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mx-text);
}

.mx-rule-group__empty {
    padding: 16px;
    border: 1px dashed var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface-muted, #f8fafc);
    color: var(--mx-text-muted);
    font-size: 0.875rem;
}

.mx-rule-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mx-rule-card-list--compact {
    margin-bottom: 12px;
}

.mx-rule-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    background: var(--mx-surface-muted, #f8fafc);
}

.mx-rule-card--inactive {
    opacity: 0.72;
}

.mx-rule-card__icon {
    font-size: 1.375rem;
    line-height: 1;
    padding-top: 2px;
}

.mx-rule-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.mx-rule-card__value {
    margin: 0 0 4px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mx-text);
    line-height: 1.35;
}

.mx-rule-card__summary {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
    line-height: 1.4;
}

.mx-rule-card__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

@media (max-width: 720px) {
    .mx-rule-card {
        grid-template-columns: auto 1fr;
    }

    .mx-rule-card__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

.mx-rule-add-panel {
    margin-top: 0;
    margin-bottom: 0;
}

.mx-rule-toolbar {
    margin-bottom: 12px;
}

.mx-rule-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
}

.mx-rule-toolbar__summary {
    flex: 1 1 220px;
    font-size: 0.875rem;
    color: var(--mx-text);
}

.mx-rule-toolbar__hint {
    margin: 6px 0 0;
}

.mx-rule-toolbar__links {
    flex: 0 0 auto;
}

.mx-customer-setup {
    margin-bottom: 16px;
}

.mx-customer-setup__progress {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    color: var(--mx-text-muted);
}

.mx-customer-setup__progress strong {
    color: var(--mx-text);
}

.mx-customer-setup-strip {
    margin-bottom: 0;
}

.mx-table-scroll-hint {
    display: none;
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: var(--mx-text-muted);
}

@media (max-width: 960px) {
    .mx-table-scroll-hint {
        display: block;
    }

    .mx-table--compact th,
    .mx-table--compact td {
        padding: 7px 8px;
        font-size: 0.8125rem;
    }
}