:root {
    --tw-primary: #51829b;
    --tw-primary-600: #456f86;
    --tw-primary-700: #37586b;
    --tw-primary-050: #eef3f6;
    --tw-primary-100: #dce8ee;
    --tw-ink: #2b3a42;
    --tw-muted: #6f858f;
    --tw-line: #e3eaee;
    --tw-bg: #f3f6f8;
    --tw-surface: #ffffff;
    --tw-ok: #2e8b57;
    --tw-ok-bg: #e6f4ec;
    --tw-warn: #b9770e;
    --tw-warn-bg: #fbf0dc;
    --tw-danger: #c0392b;
    --tw-danger-bg: #fbe7e4;
    --tw-radius: 6px;
    --tw-radius-lg: 10px;
}

body, .x-body {
    background: var(--tw-bg);
    color: var(--tw-ink);
    font-family: 'Roboto', 'Segoe UI', sans-serif;
}

/* --- Üst uygulama çubuğu --- */
.tw-appbar, .tw-appbar.x-toolbar-default {
    background: var(--tw-primary-600) !important;
    border: 0 !important;
    padding: 0 14px !important;
    box-shadow: 0 2px 6px rgba(43,58,66,.18);
}
.tw-appbar .x-toolbar-text, .tw-appbar .x-btn-inner, .tw-appbar .x-tool-img,
.tw-appbar-title, .tw-appbar .x-btn-icon-el, .tw-appbar .fa {
    color: #fff !important;
    fill: #fff;
}
.tw-appbar-title { font-size: 18px; font-weight: 500; letter-spacing: .2px; }
.tw-appbar .x-btn-default-toolbar-small {
    background: transparent !important;
    border-color: transparent !important;
}
.tw-appbar .x-btn-over {
    background: rgba(255,255,255,.16) !important;
    border-color: transparent !important;
}
.tw-appbar img { filter: brightness(0) invert(1); }

/* --- Paneller --- */
.x-panel {
    border-color: var(--tw-line);
    border-radius: var(--tw-radius-lg);
}
.x-panel-default {
    background: var(--tw-surface);
}
.x-panel-header-default, .x-header-default {
    background: var(--tw-surface) !important;
    border-bottom: 1px solid var(--tw-line) !important;
    padding: 12px 16px !important;
}
.x-panel-header-default .x-title-text, .x-header-text-container-default .x-title-text {
    color: var(--tw-primary-700) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* --- Araç çubukları --- */
.x-toolbar-default {
    background: var(--tw-surface);
    border-color: var(--tw-line);
    padding: 8px 10px;
}

/* --- Butonlar --- */
.x-btn-default-small, .x-btn-default-toolbar-small {
    background: var(--tw-surface);
    border: 1px solid var(--tw-line);
    border-radius: var(--tw-radius);
    color: var(--tw-ink);
}
.x-btn-default-small .x-btn-inner, .x-btn-default-toolbar-small .x-btn-inner {
    color: var(--tw-ink);
    font-weight: 500;
}
.x-btn-over.x-btn-default-small, .x-btn-over.x-btn-default-toolbar-small {
    background: var(--tw-primary-050);
    border-color: var(--tw-primary-100);
}
.x-btn-pressed.x-btn-default-small, .x-btn-pressed.x-btn-default-toolbar-small {
    background: var(--tw-primary-100);
    border-color: var(--tw-primary);
}
.tw-btn-primary.x-btn-default-small, .tw-btn-primary.x-btn-default-toolbar-small {
    background: var(--tw-primary) !important;
    border-color: var(--tw-primary) !important;
}
.tw-btn-primary .x-btn-inner { color: #fff !important; }
.tw-btn-primary.x-btn-over { background: var(--tw-primary-600) !important; border-color: var(--tw-primary-600) !important; }
.tw-btn-primary.x-btn-pressed { background: var(--tw-primary-700) !important; border-color: var(--tw-primary-700) !important; }

/* --- Form alanları --- */
.x-form-item-label-text { color: var(--tw-ink); font-weight: 500; }
.x-form-trigger-wrap { background: var(--tw-surface); border-radius: var(--tw-radius); overflow: hidden; }
.x-form-trigger-wrap > :last-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; }
.x-form-text, .x-form-field {
    border: 1px solid var(--tw-line);
    border-radius: var(--tw-radius);
    color: var(--tw-ink);
}
.x-form-text-default { height: 32px; }
.x-form-text:focus, .x-form-field-focus .x-form-text, .x-form-focus {
    border-color: var(--tw-primary) !important;
}
.x-form-trigger-wrap-focus {
    border-color: var(--tw-primary) !important;
    outline: 3px solid rgba(81,130,155,.18);
    border-radius: var(--tw-radius);
}

/* --- Grid --- */
.x-grid { border-radius: var(--tw-radius-lg); }
.x-grid-header-ct, .x-column-header-default {
    background: #f7fafb !important;
    border-color: var(--tw-line) !important;
}
.x-column-header-text-inner, .x-column-header-text {
    color: var(--tw-muted) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.x-grid-cell, .x-grid-item {
    border-color: var(--tw-line) !important;
    color: var(--tw-ink);
}
.x-grid-row-over .x-grid-cell { background: #f2f6f8 !important; }
.x-grid-item-selected .x-grid-cell, .x-grid-item-focused .x-grid-cell {
    background: var(--tw-primary-050) !important;
    box-shadow: inset 3px 0 0 var(--tw-primary);
}

/* --- Sekmeler --- */
.x-tab-bar-default { background: var(--tw-surface); border-bottom: 1px solid var(--tw-line); }
.x-tab-default {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2.5px solid transparent !important;
    border-radius: 0 !important;
}
.x-tab-default .x-tab-inner { color: var(--tw-muted) !important; font-weight: 500; }
.x-tab-over.x-tab-default .x-tab-inner { color: var(--tw-ink) !important; }
.x-tab-active.x-tab-default {
    border-bottom-color: var(--tw-primary) !important;
}
.x-tab-active.x-tab-default .x-tab-inner { color: var(--tw-primary-700) !important; }

/* --- Pencere / menü --- */
.x-window-default {
    border-radius: var(--tw-radius-lg);
    box-shadow: 0 14px 40px rgba(43,58,66,.22);
    border: 0;
}
.x-window-header-default {
    background: var(--tw-surface) !important;
    border-bottom: 1px solid var(--tw-line) !important;
}
.x-window-header-default .x-title-text { color: var(--tw-primary-700) !important; font-weight: 500; }
.x-menu-default {
    border-radius: var(--tw-radius);
    box-shadow: 0 10px 28px rgba(43,58,66,.18);
    border-color: var(--tw-line);
}

/* --- Durum etiketleri --- */
.tw-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
}
.tw-tag-ok { color: var(--tw-ok); background: var(--tw-ok-bg); }
.tw-tag-warn { color: var(--tw-warn); background: var(--tw-warn-bg); }
.tw-tag-danger { color: var(--tw-danger); background: var(--tw-danger-bg); }

/* --- İnce kaydırma çubukları --- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c7d3da; border-radius: 10px; border: 2px solid var(--tw-bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--tw-muted); }