/* ============================================
   Perfect Panel - Bootstrap Üzerine Dark Theme
   Bootstrap.css'den SONRA yüklenir - sadece override
   Custom CSS alanına yapıştırın
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --pp-primary: #6366f1;
    --pp-primary-dark: #4f46e5;
    --pp-primary-light: #818cf8;
    --pp-bg: #0f172a;
    --pp-bg-card: #1e293b;
    --pp-text: #f1f5f9;
    --pp-text-muted: #94a3b8;
    --pp-border: #334155;
}

/* Font - SADECE text elementleri, ikonlara dokunma */
body,
body .container,
body .panel,
body .form-control,
body .btn,
body label,
body .control-label,
body .navbar-brand,
body .navbar-nav a,
body .dropdown-menu,
body .table {
    font-family: 'DM Sans', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Glyphicons - Bootstrap'tan gelen font KORUNSUN */
.glyphicon,
[class^="glyphicon-"],
[class*=" glyphicon-"],
.bootstrap-select .caret {
    font-family: 'Glyphicons Halflings' !important;
}

/* Body & Layout */
body {
    background: var(--pp-bg) !important;
    color: var(--pp-text) !important;
}

/* Navbar */
.navbar,
.navbar-default {
    background: var(--pp-bg-card) !important;
    border-color: var(--pp-border) !important;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text {
    color: var(--pp-text) !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a {
    color: var(--pp-primary-light) !important;
    background: rgba(99, 102, 241, 0.15) !important;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--pp-text) !important;
}

/* Panels & Wells */
.panel,
.panel-default,
.well {
    background-color: var(--pp-bg-card) !important;
    border-color: var(--pp-border) !important;
}

.panel-heading,
.panel-default > .panel-heading {
    background-color: rgba(99, 102, 241, 0.15) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

.panel-body {
    color: var(--pp-text) !important;
}

/* Perfect Panel özel: border-rounded, service-description */
.border-rounded,
.service-description,
.description {
    background-color: var(--pp-bg-card) !important;
    color: var(--pp-text) !important;
    border-color: var(--pp-border) !important;
}

/* Form Controls */
.form-control {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

.form-control:focus {
    border-color: var(--pp-primary) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

.form-control::-webkit-input-placeholder { color: var(--pp-text-muted) !important; }
.form-control::-moz-placeholder { color: var(--pp-text-muted) !important; }
.form-control:-ms-input-placeholder { color: var(--pp-text-muted) !important; }

/* Input group - Bootstrap ile uyumlu */
.input-group-addon {
    background-color: rgba(99, 102, 241, 0.2) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

/* Labels */
label,
.control-label {
    color: var(--pp-text) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--pp-primary) !important;
    border-color: var(--pp-primary-dark) !important;
}

.btn-primary:hover {
    background-color: var(--pp-primary-dark) !important;
    border-color: var(--pp-primary) !important;
}

.btn-default {
    background-color: var(--pp-bg-card) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

.btn-default:hover {
    background-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

/* Links */
a {
    color: var(--pp-primary-light) !important;
}

a:hover {
    color: #a5b4fc !important;
}

/* Tables */
.table {
    color: var(--pp-text) !important;
}

.table > thead > tr > th {
    background-color: rgba(99, 102, 241, 0.2) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-color: var(--pp-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

/* Dropdown - Bootstrap .dropdown-menu override */
.dropdown-menu {
    background-color: var(--pp-bg-card) !important;
    border-color: var(--pp-border) !important;
}

.dropdown-menu > li > a {
    color: var(--pp-text) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: rgba(99, 102, 241, 0.3) !important;
    color: var(--pp-text) !important;
}

/* Bootstrap-select - servis/kategori dropdown */
.bootstrap-select .btn-default {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

.bootstrap-select .dropdown-menu {
    background-color: var(--pp-bg-card) !important;
}

.bootstrap-select .dropdown-menu li a {
    color: var(--pp-text) !important;
}

.bootstrap-select .dropdown-menu li a span {
    color: var(--pp-text) !important;
}

/* Select2 (varsa) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border-color: var(--pp-border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--pp-text) !important;
}

.select2-container--default .select2-dropdown {
    background-color: var(--pp-bg-card) !important;
    border-color: var(--pp-border) !important;
}

.select2-container--default .select2-results__option {
    color: var(--pp-text) !important;
}

/* Alerts */
.alert-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #6ee7b7 !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

.alert-info {
    background-color: rgba(99, 102, 241, 0.2) !important;
    border-color: var(--pp-primary) !important;
    color: var(--pp-primary-light) !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
    color: #fcd34d !important;
}

/* Text muted */
.text-muted {
    color: var(--pp-text-muted) !important;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
    background-color: var(--pp-bg-card) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover {
    background-color: var(--pp-primary) !important;
    border-color: var(--pp-primary) !important;
}

/* Modal */
.modal-content {
    background-color: var(--pp-bg-card) !important;
    border-color: var(--pp-border) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--pp-border) !important;
}

.modal-title {
    color: var(--pp-text) !important;
}

/* Ticket */
.ticket-message,
.ticket-message-right .ticket-message,
.ticket-message-left .ticket-message {
    background-color: var(--pp-bg) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: var(--pp-bg-card) !important;
}

.breadcrumb > .active {
    color: var(--pp-text-muted) !important;
}

/* List group */
.list-group-item {
    background-color: var(--pp-bg-card) !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}

/* Code / pre */
pre,
code {
    background-color: var(--pp-bg) !important;
    color: var(--pp-text) !important;
    border-color: var(--pp-border) !important;
}

/* ============================================
   Servisler sayfası - Kompakt görünüm
   Tek ekranda daha fazla servis sığsın (metin bozulmadan)
   ============================================ */

/* Tablo hücreleri daha sıkı - sadece padding azalt */
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 6px 10px !important;
    vertical-align: top !important;
}

/* Servis adı - daha küçük font, satırlar doğal aksın */
.service-name,
.width-service-name {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Açıklama - küçük font, doğal wrap, kesme yok */
.service-description,
.table td .description,
.service-description table {
    font-size: 12px !important;
    line-height: 1.45 !important;
    word-wrap: break-word !important;
}