/* ═══════════════════════════════════════════════════════════════════════════
   Hubitx UI — ortak form, grid ve sayfa bileşenleri
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --hx-border: #e2e8f0;
    --hx-border-soft: #eef2f7;
    --hx-bg: #f8fafc;
    --hx-bg-soft: #fafbfd;
    --hx-text: #334155;
    --hx-text-muted: #64748b;
    --hx-title: #0f172a;
    --hx-primary: #2563eb;
    --hx-panel-accent: #4b3f8f;
    --hx-radius: 14px;
    --hx-radius-sm: 10px;
}

/* ── Sayfa başlığı (otomatik + sınıf) ─────────────────────────────────────── */
#mainContent > .d-flex.justify-content-between.align-items-center.mb-4,
#mainContent > .d-flex.justify-content-between.align-items-center.mb-3,
.hx-page-header {
    margin-bottom: 1.25rem !important;
}

#mainContent > .d-flex.justify-content-between.align-items-center.mb-4 h1,
#mainContent > .d-flex.justify-content-between.align-items-center.mb-4 h2,
#mainContent > .d-flex.justify-content-between.align-items-center.mb-4 h4,
#mainContent > .d-flex.justify-content-between.align-items-center.mb-3 h1,
#mainContent > .d-flex.justify-content-between.align-items-center.mb-3 h2,
#mainContent > .d-flex.justify-content-between.align-items-center.mb-3 h4,
.hx-page-header .hx-title,
.hx-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hx-title);
    margin: 0;
    line-height: 1.2;
}

.hx-subtitle,
#mainContent > .d-flex .text-muted.small.mt-1 {
    font-size: .84rem;
    color: var(--hx-text-muted);
    margin-top: .25rem;
}

.hx-page-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.hx-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .85rem;
}

.hx-stat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--hx-border);
    color: #475569;
}

.hx-stat i { opacity: .75; }
.hx-stat strong { color: var(--hx-title); }

/* ── Kabuk (liste / form sarmalayıcı) ────────────────────────────────────── */
.hx-shell,
.pl-shell,
#mainContent .card.shadow-sm,
#mainContent .card.hx-shell {
    border: 1px solid var(--hx-border) !important;
    border-radius: var(--hx-radius) !important;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05) !important;
}

.hx-shell > .card-body.p-0,
#mainContent .card.shadow-sm > .card-body.p-0 {
    padding: 0 !important;
}

/* ── Filtre alanı ────────────────────────────────────────────────────────── */
.hx-filter,
.pl-filter,
.hx-shell > form.row,
#mainContent .card.shadow-sm > .card-body > form.row.g-2,
#mainContent .card.shadow-sm > .card-body > form.row.g-3 {
    padding: 1rem 1.15rem;
    background: linear-gradient(180deg, #fafbfd 0%, var(--hx-bg) 100%);
    border-bottom: 1px solid var(--hx-border-soft);
    margin-bottom: 0 !important;
}

.hx-filter .form-label,
.pl-filter .form-label,
#mainContent .card.shadow-sm .form-label.fw-semibold:first-child {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hx-text-muted);
    margin-bottom: .3rem;
}

.hx-filter .form-control,
.hx-filter .form-select,
.pl-filter .form-control,
.pl-filter .form-select,
#mainContent .card.shadow-sm .form-control,
#mainContent .card.shadow-sm .form-select {
    border-color: var(--hx-border);
    font-size: .86rem;
}

.hx-filter .form-control:focus,
.hx-filter .form-select:focus,
#mainContent .card.shadow-sm .form-control:focus,
#mainContent .card.shadow-sm .form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .12);
}

.hx-filter .input-group-text,
.pl-filter .input-group-text {
    background: #fff;
    color: #94a3b8;
    border-color: var(--hx-border);
}

/* ── Tablo ─────────────────────────────────────────────────────────────────── */
.hx-table,
.pl-table,
#mainContent .card .table:not(.table-sm):not(.no-hx):not(.table-borderless),
#mainContent .hx-shell .table:not(.no-hx) {
    margin: 0;
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--hx-bg);
}

.hx-table thead th,
.pl-table thead th,
#mainContent .card .table:not(.table-sm):not(.no-hx) thead th,
#mainContent .card .table:not(.table-sm):not(.no-hx) thead td,
#mainContent .table-dark thead th,
#mainContent .table-light thead th {
    background: var(--hx-bg) !important;
    border-bottom: 1px solid var(--hx-border) !important;
    border-top: none !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hx-text-muted) !important;
    padding: .85rem 1rem;
    white-space: nowrap;
    --bs-table-bg: var(--hx-bg);
}

.hx-table tbody td,
.pl-table tbody td,
#mainContent .card .table:not(.table-sm):not(.no-hx) tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: .86rem;
    color: var(--hx-text);
}

.hx-table tbody tr:last-child td,
.pl-table tbody tr:last-child td,
#mainContent .card .table:not(.table-sm):not(.no-hx) tbody tr:last-child td {
    border-bottom: none;
}

.hx-table tbody tr,
.pl-table tbody tr,
#mainContent .card .table:not(.table-sm):not(.no-hx) tbody tr {
    transition: background .12s ease;
}

.hx-table tbody tr:hover,
.pl-table tbody tr:hover,
#mainContent .card .table:not(.table-sm):not(.no-hx) tbody tr:hover {
    background: var(--hx-bg);
}

/* ── Form paneli ───────────────────────────────────────────────────────────── */
.hx-panel,
.pf-panel {
    border: 1px solid #e8e6f0;
    border-radius: var(--hx-radius-sm);
    background: #fff;
    margin-bottom: 1rem;
}

.hx-panel-head,
.pf-panel-head,
#mainContent .card.shadow-sm > .card-header:not(.bg-dark):not(.bg-secondary) {
    background: linear-gradient(180deg, #f9f8fd 0%, #f3f1fa 100%) !important;
    padding: .65rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--hx-panel-accent) !important;
    border-bottom: 1px solid #ebe9f2;
    border-radius: var(--hx-radius-sm) var(--hx-radius-sm) 0 0;
}

#mainContent .card.shadow-sm > .card-header.bg-dark,
#mainContent .card.shadow-sm > .card-header.bg-secondary {
    background: linear-gradient(180deg, #f9f8fd 0%, #f3f1fa 100%) !important;
    color: var(--hx-panel-accent) !important;
    border-bottom: 1px solid #ebe9f2;
    font-weight: 600;
    font-size: .9rem;
}

#mainContent .card.shadow-sm > .card-header.bg-dark .btn-outline-light,
#mainContent .card.shadow-sm > .card-header.bg-secondary .btn-outline-light {
    border-color: var(--hx-border);
    color: #475569;
    background: #fff;
}

#mainContent .card.shadow-sm > .card-header.bg-dark .btn-outline-light:hover,
#mainContent .card.shadow-sm > .card-header.bg-secondary .btn-outline-light:hover {
    background: var(--hx-bg);
    color: var(--hx-title);
}

.hx-panel-body,
.pf-panel-body,
#mainContent .row.justify-content-center .card.shadow-sm > .card-body,
#mainContent .card.shadow-sm > .card-body:not(.p-0) {
    padding: 1.1rem 1.15rem;
}

.hx-field .form-label,
.pf-field .form-label,
#mainContent .card.shadow-sm form .form-label,
#mainContent .hx-panel form .form-label {
    font-size: .85rem;
    color: #5c5a6e;
    margin-bottom: .3rem;
}

.hx-field .form-control,
.hx-field .form-select,
.pf-field .form-control,
.pf-field .form-select,
#mainContent .card.shadow-sm form .form-control,
#mainContent .card.shadow-sm form .form-select {
    border-color: var(--hx-border);
}

.hx-field .form-control:focus,
.hx-field .form-select:focus,
#mainContent .card.shadow-sm form .form-control:focus,
#mainContent .card.shadow-sm form .form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .12);
}

.hx-subtitle,
.pf-subtitle {
    font-size: .78rem;
    font-weight: 600;
    color: #7a7890;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .5rem;
}

.hx-highlight,
.pf-ucret-highlight {
    background: #f0f6ff;
    border: 1px solid #cfe2ff;
    border-radius: 8px;
    padding: .85rem 1rem;
}

.hx-highlight .hx-highlight-value,
.pf-ucret-highlight .ucret-deger {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a4d8f;
    line-height: 1.2;
}

.hx-check-row,
.pf-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding-top: .25rem;
}

.hx-history-table th,
.pf-history-table th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6c6a80;
    background: #f8f7fc;
}

/* ── Sekmeler ─────────────────────────────────────────────────────────────── */
#mainContent .nav-tabs {
    border-bottom: 1px solid var(--hx-border);
    gap: .15rem;
}

#mainContent .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--hx-text-muted);
    font-weight: 500;
    font-size: .86rem;
    padding: .55rem .85rem;
    border-radius: 8px 8px 0 0;
}

#mainContent .nav-tabs .nav-link:hover {
    color: var(--hx-title);
    background: var(--hx-bg);
}

#mainContent .nav-tabs .nav-link.active {
    color: var(--hx-panel-accent);
    border-bottom-color: #6f5fcf;
    background: transparent;
    font-weight: 600;
}

/* ── Hücre bileşenleri ─────────────────────────────────────────────────────── */
.hx-index, .pl-index { font-size: .78rem; font-weight: 600; color: #94a3b8; width: 42px; }

.hx-person, .pl-person { display: flex; align-items: center; gap: .75rem; min-width: 200px; }

.hx-avatar, .pl-avatar {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; color: #fff; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.hx-avatar img, .pl-avatar img { width: 100%; height: 100%; object-fit: cover; }

.hx-avatar-a, .pl-avatar-a { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.hx-avatar-b, .pl-avatar-b { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.hx-avatar-c, .pl-avatar-c { background: linear-gradient(135deg, #10b981, #059669); }
.hx-avatar-d, .pl-avatar-d { background: linear-gradient(135deg, #f59e0b, #d97706); }
.hx-avatar-e, .pl-avatar-e { background: linear-gradient(135deg, #ec4899, #db2777); }
.hx-avatar-f, .pl-avatar-f { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

.hx-name, .pl-name { font-weight: 600; color: var(--hx-title); text-decoration: none; line-height: 1.25; }
.hx-name:hover, .pl-name:hover { color: var(--hx-primary); }

.hx-meta, .pl-meta { font-size: .76rem; color: var(--hx-text-muted); margin-top: .15rem; line-height: 1.3; }

.hx-tag, .pl-tag {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .45rem; border-radius: 6px; font-size: .68rem; font-weight: 600;
    background: #ecfeff; color: #0e7490; border: 1px solid #cffafe; vertical-align: middle;
}

.hx-pill, .pl-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .28rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
    background: #f1f5f9; color: #475569; border: 1px solid var(--hx-border); white-space: nowrap;
}

.hx-pill i, .pl-pill i { font-size: .7rem; opacity: .7; }

.hx-dept, .pl-dept { max-width: 180px; line-height: 1.35; color: #475569; }
.hx-mesai-name, .pl-mesai-name { font-weight: 600; color: var(--hx-text); font-size: .82rem; }
.hx-mesai-time, .pl-mesai-time { font-size: .74rem; color: var(--hx-text-muted); margin-top: .1rem; }

.hx-mono, .pl-mono,
#mainContent .table code,
#mainContent .card code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    color: #475569;
    background: var(--hx-bg);
    padding: .2rem .45rem;
    border-radius: 6px;
    border: 1px solid var(--hx-border-soft);
}

.hx-status, .pl-status {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
}

.hx-status-dot, .pl-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.hx-status-active, .pl-status-active { background: #ecfdf5; color: #047857; border: 1px solid #bbf7d0; }
.hx-status-active .hx-status-dot, .pl-status-active .pl-status-dot { background: #10b981; }

.hx-status-passive, .pl-status-passive { background: var(--hx-bg); color: var(--hx-text-muted); border: 1px solid var(--hx-border); }
.hx-status-passive .hx-status-dot, .pl-status-passive .pl-status-dot { background: #94a3b8; }

/* Bootstrap badge → hx status benzeri (tablolarda) */
#mainContent .table .badge.bg-success {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #bbf7d0;
    font-weight: 600;
    padding: .35em .65em;
}

#mainContent .table .badge.bg-secondary,
#mainContent .table .badge.bg-dark {
    background: var(--hx-bg) !important;
    color: var(--hx-text-muted) !important;
    border: 1px solid var(--hx-border);
    font-weight: 600;
}

#mainContent .table .badge.bg-primary {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe;
    font-weight: 600;
}

#mainContent .table .badge.bg-info {
    background: #ecfeff !important;
    color: #0e7490 !important;
    border: 1px solid #cffafe;
}

/* ── İşlem butonları ───────────────────────────────────────────────────────── */
.hx-actions, .pl-actions { display: inline-flex; gap: .35rem; justify-content: flex-end; }

.hx-action-btn, .pl-action-btn,
#mainContent .table td.text-end .btn-sm:has(.bi):not(.dropdown-toggle),
#mainContent .table th.text-end .btn-sm:has(.bi):not(.dropdown-toggle) {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 9px !important;
    border: 1px solid var(--hx-border) !important;
    background: #fff !important;
    color: var(--hx-text-muted) !important;
    text-decoration: none;
    transition: all .15s ease;
    line-height: 1;
}

.hx-action-btn:hover, .pl-action-btn:hover,
#mainContent .table td.text-end .btn-sm:has(.bi):not(.dropdown-toggle):hover {
    background: var(--hx-bg) !important;
    color: var(--hx-title) !important;
    border-color: #cbd5e1 !important;
}

.hx-action-btn-danger:hover, .pl-action-btn-danger:hover,
#mainContent .table td.text-end .btn-outline-danger.btn-sm:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

#mainContent .table td.text-end .btn-outline-primary.btn-sm:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
}

/* ── Alt bilgi / boş durum ─────────────────────────────────────────────────── */
.hx-footer, .pl-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem 1.15rem; background: var(--hx-bg-soft); border-top: 1px solid var(--hx-border-soft);
    font-size: .8rem; color: var(--hx-text-muted);
}

.hx-empty, .pl-empty { padding: 3.5rem 1.5rem; text-align: center; color: var(--hx-text-muted); }

.hx-empty-icon, .pl-empty-icon {
    width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px;
    background: #f1f5f9; color: #94a3b8;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}

/* ── Genel ─────────────────────────────────────────────────────────────────── */
html { font-size: 17px; }

body {
    min-height: 100vh;
    background-color: var(--hx-bg);
}

main { flex: 1; }

.alert { border-radius: 10px; }

.btn { border-radius: 8px; font-size: .85rem; }
.btn-sm { border-radius: 6px; }

.badge { font-weight: 500; }

@media (max-width: 991.98px) {
    .hx-hide-md, .pl-hide-md { display: none !important; }
}

@media (max-width: 767.98px) {
    .hx-hide-sm, .pl-hide-sm { display: none !important; }
    #mainContent > .d-flex h2, #mainContent > .d-flex h4, .hx-title { font-size: 1.15rem; }
}

@media (max-width: 576px) {
    h2 { font-size: 1.4rem; }
}

/* Personel formu — zorunlu alan */
.zorunlu-alan::after {
    content: " *";
    color: #dc3545;
    font-weight: 700;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

.nav-tabs .nav-link.text-danger { font-weight: 600; }

/* Sneat uyumluluk — dashboard kartları */
.stat-card { border-radius: var(--bs-border-radius-lg, 0.5rem); border: none; overflow: hidden; }
.stat-card .stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}