/* ============================================
   MikroTik Manager - Özel Stil Dosyası
   MotaAdmin Bootstrap 5 Tema Üzeri Eklemeler
   ============================================ */

/* ---- Cihaz Paneli (Chatbox) ---- */
.chatbox .dz-chat-user:hover {
    background: rgba(58, 122, 254, 0.06);
}
[data-theme-version="dark"] .chatbox .dz-chat-user:hover {
    background: rgba(255, 255, 255, 0.05);
}
[data-theme-version="dark"] .chatbox .dz-chat-user .user_info span {
    color: #c4c9d5;
}
[data-theme-version="dark"] .chatbox .img_cont {
    background: rgba(255, 255, 255, 0.1) !important;
}
.chatbox .name-first-letter {
    background: rgba(58, 122, 254, 0.05);
}
[data-theme-version="dark"] .chatbox .name-first-letter {
    background: rgba(255, 255, 255, 0.03);
    color: #7e8ce0 !important;
}

/* ---- Cihaz Detay Tab (Skills Style) ---- */
.light.btn-primary.active,
.light.btn-primary.active:focus,
.light.btn-primary.device-tab.active {
    background-color: #3a7afe !important;
    border-color: #3a7afe !important;
    color: #fff !important;
}

/* ---- PPPoE Tablo Başlıkları ---- */
.tab-content .table thead th {
    background-color: #f2f4f5;
}
[data-theme-version="dark"] .tab-content .table thead th {
    background-color: #1e2746;
}

/* ---- PPPoE Sub Tab (Skills Style) ---- */
.pppoe-tabs .pppoe-tab.active,
.pppoe-tabs .pppoe-tab.active:focus {
    background-color: #00afef !important;
    border-color: #00afef !important;
    color: #fff !important;
}

/* ---- Sidebar Logo Kontrolü ---- */
.nav-header .logo-abbr {
    display: none !important;
}
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .nav-header .logo-abbr,
[data-sidebar-style="mini"] .nav-header .logo-abbr,
[data-sidebar-style="compact"] .nav-header .logo-abbr,
[data-sidebar-style="modern"] .nav-header .logo-abbr,
[data-sidebar-style="icon-hover"] .nav-header .logo-abbr {
    display: block !important;
}

/* ---- Cihaz Kartları ---- */
.device-card {
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.device-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    color: inherit;
}

/* ---- Status Badge ---- */
.badge-online {
    background-color: rgba(28, 187, 140, 0.15);
    color: #1cbb8c;
}

.badge-offline {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

/* ---- Pulse Animasyonu (online göstergesi) ---- */
.pulse-online {
    position: relative;
}

.pulse-online::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #1cbb8c;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

/* ---- Progress Bar Renkleri ---- */
.bar-low { background-color: #1cbb8c !important; }
.bar-medium { background-color: #eab308 !important; }
.bar-high { background-color: #f97316 !important; }
.bar-critical { background-color: #dc3545 !important; }

/* ---- Toast Bildirimi ---- */
.toast-container {
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.custom-toast {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;
    max-width: 360px;
    color: #fff;
}

.custom-toast.toast-success { background-color: #1cbb8c; }
.custom-toast.toast-error { background-color: #dc3545; }
.custom-toast.toast-info { background-color: #3b82f6; }
.custom-toast.toast-warning { background-color: #f59e0b; }

@keyframes slideIn {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ---- Skeleton Loading ---- */
.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

[data-theme-version="dark"] .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Bağlantı Testi Sonuç ---- */
.connection-success {
    background-color: rgba(28, 187, 140, 0.1);
    border: 1px solid rgba(28, 187, 140, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
}

.connection-error {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* ---- Arama Sonuçları (Header) ---- */
.search-result-item {
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.search-result-item:hover {
    background-color: rgba(59, 130, 246, 0.08);
    color: inherit;
}

/* ---- Scrollbar ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5);
}

/* ---- Form Select Yükseklik ---- */
.form-select {
    height: 40px;
}

/* ---- Interface Tablo Satır Renkleri ---- */
.iface-disabled > td {
    background-color: #ececec !important;
}

.iface-active > td {
    background-color: rgba(28, 187, 140, 0.08) !important;
}

/* ---- Interface Tablo Inline Edit ---- */
.editable-cell {
    cursor: pointer;
    position: relative;
}

.editable-cell:hover {
    background-color: rgba(59, 130, 246, 0.06);
}

.editable-cell:not(.editing):hover::after {
    content: '\f303';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 10px;
    color: #6c757d;
    margin-left: 4px;
}

.editable-cell.editing {
    cursor: default;
    background-color: transparent;
}

/* ---- Interface Tablo RX/TX Sabit Genişlik ---- */
.col-rate {
    min-width: 120px;
    white-space: nowrap;
}

/* ---- Torch Filtre Kutuları ---- */
#torchFilters .form-control,
#torchFilters .form-select,
#torchFilters .input-group-text,
#torchFilters .btn {
    height: 32px;
    font-size: 13px;
}

/* ---- Card Header Alt Border Kapat ---- */
.card-header {
    border-bottom: none;
}

/* ---- Font Mono helper ---- */
.font-mono {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---- Select2 Bootstrap 5 Uyumu ---- */
.select2-container--default .select2-selection--single {
    height: 40px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 6px 12px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
    color: #495057;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    min-height: 40px;
}

.select2-dropdown {
    border-color: #ced4da;
    border-radius: 0.375rem;
    z-index: 1060;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #3b7ddd;
}

.select2-container {
    width: 100% !important;
}

/* ---- Release Timeline: span block override düzelt ---- */
.widget-timeline .timeline > li > .timeline-panel span {
    display: inline;
}

/* ---- Placeholder Rengi ---- */
::placeholder {
    color: #c0c0c0 !important;
    opacity: 1;
}

/* ---- İşlem Kolonu Sağa Yasla ---- */
.col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ---- Tooltip (CSS-only, anında açılır) ---- */
[data-tip] {
    position: relative;
}
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
    background: #23272f;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s, transform 0.08s;
    z-index: 9999;
}
[data-theme-version="dark"] [data-tip]::after {
    background: #3a3f4b;
}
[data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
/* Alt yönlü tooltip */
[data-tip-dir="bottom"]::after {
    bottom: auto;
    top: calc(100% + 6px);
}