/* ------------------------------------------------------------------
   CNC Takip Paneli - özel stiller (AdminLTE 3.2 üzerine)
------------------------------------------------------------------ */

:root {
    --cnc-running: #28a745;
    --cnc-idle: #ffc107;
    --cnc-alarm: #dc3545;
    --cnc-setup: #17a2b8;
    --cnc-maintenance: #6f42c1;
    --cnc-offline: #6c757d;
}

body { font-size: .92rem; font-family: 'Ubuntu', sans-serif; }

.navbar-cnc { background: #1f2d3d; }
.navbar-cnc .nav-link { color: #c2c7d0 !important; }
.brand-image-icon { font-size: 1.4rem; margin-right: .4rem; color: #ffc107; }

/* ---------------------------------------------------- Makina kartları */
.machine-card {
    border: 0;
    border-top: 4px solid var(--cnc-offline);
    border-radius: .5rem;
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.machine-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }

.machine-card.st-running     { border-top-color: var(--cnc-running); }
.machine-card.st-idle        { border-top-color: var(--cnc-idle); }
.machine-card.st-alarm       { border-top-color: var(--cnc-alarm); }
.machine-card.st-setup       { border-top-color: var(--cnc-setup); }
.machine-card.st-maintenance { border-top-color: var(--cnc-maintenance); }
.machine-card.st-offline     { border-top-color: var(--cnc-offline); opacity: .85; }

.machine-card.st-alarm { animation: alarmGlow 1.6s ease-in-out infinite; }
@keyframes alarmGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,.45); }
    50%      { box-shadow: 0 0 0 .55rem rgba(220,53,69,0); }
}

.machine-card .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: .6rem .9rem;
}
.machine-card .machine-name { font-weight: 600; font-size: 1rem; margin: 0; line-height: 1.2; }
.machine-card .machine-code { font-size: .72rem; color: #869099; letter-spacing: .5px; }
.machine-card .card-body { padding: .75rem .9rem; }

.status-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .74rem; font-weight: 600; color: #fff;
}
.status-pill.st-running     { background: var(--cnc-running); }
.status-pill.st-idle        { background: var(--cnc-idle); color: #4b3d00; }
.status-pill.st-alarm       { background: var(--cnc-alarm); }
.status-pill.st-setup       { background: var(--cnc-setup); }
.status-pill.st-maintenance { background: var(--cnc-maintenance); }
.status-pill.st-offline     { background: var(--cnc-offline); }

.live-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #6c757d; }
.live-dot.on { background: #28a745; animation: pulse 1.4s infinite; }
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(40,167,69,.7); }
    70%  { box-shadow: 0 0 0 8px rgba(40,167,69,0); }
    100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); }
}

/* Kart içi metrik satırları */
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .35rem .75rem; }
.metric { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed #eef0f2; padding-bottom: .15rem; }
.metric .lbl { color: #8a94a0; font-size: .74rem; }
.metric .val { font-weight: 600; font-family: 'Consolas', 'Courier New', monospace; font-size: .82rem; }

.progress-thin { height: 6px; border-radius: 3px; }

.alarm-line {
    background: rgba(220,53,69,.08);
    border-left: 3px solid var(--cnc-alarm);
    padding: .35rem .5rem; border-radius: .2rem;
    font-size: .78rem; color: #a71d2a;
}

/* ---------------------------------------------------- Detay sayfası */
.metric-tile { border-radius: .5rem; padding: .9rem; background: #fff; border: 1px solid #e9ecef; height: 100%; }
.metric-tile .tile-value { font-size: 1.6rem; font-weight: 700; font-family: 'Consolas', monospace; line-height: 1.1; }
.metric-tile .tile-label { font-size: .75rem; color: #8a94a0; text-transform: uppercase; letter-spacing: .5px; }
.metric-tile .tile-icon { float: right; font-size: 1.8rem; opacity: .18; }

.axis-box { background: #1f2d3d; color: #7fe08a; font-family: 'Consolas', monospace; border-radius: .4rem; padding: .6rem .8rem; }
.axis-box .axis-row { display: flex; justify-content: space-between; font-size: 1rem; }
.axis-box .axis-name { color: #ffc107; }

table.dataTable td, table.dataTable th { font-size: .85rem; vertical-align: middle !important; }
.table-cnc td { vertical-align: middle !important; }

/* Giriş sayfası */
.login-page-cnc {
    background: linear-gradient(135deg, #1f2d3d 0%, #34495e 100%);
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
.login-card-cnc { width: 400px; max-width: 94%; border-radius: .6rem; overflow: hidden; box-shadow: 0 1rem 3rem rgba(0,0,0,.35); }
.login-card-cnc .login-head { background: #007bff; color: #fff; padding: 1.5rem; text-align: center; }
.login-card-cnc .login-head i { font-size: 2.4rem; }

@media (max-width: 575.98px) {
    .metric-grid { grid-template-columns: 1fr; }
    .content-header h1 { font-size: 1.3rem; }
}

/* ==========================================================================
   MODERN SOL MENÜ (sidebar)
========================================================================== */
:root {
    --cnc-sidebar: #1a2634;
    --cnc-sidebar-dark: #121a24;
    --cnc-accent: #0d6efd;
    --cnc-accent-dark: #0b5ed7;
}

.main-sidebar,
.main-sidebar::before { background-color: var(--cnc-sidebar) !important; }

.sidebar-dark-primary .brand-link {
    background-color: var(--cnc-sidebar-dark) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.sidebar-dark-primary .user-panel {
    margin: 0 .75rem 1rem;
    padding: .65rem .75rem;
    background: rgba(255,255,255,.06);
    border-radius: .6rem;
}

/* Menü öğeleri */
.nav-sidebar .nav-item > .nav-link {
    border-radius: .5rem;
    margin: 2px 10px;
    padding: .55rem .75rem;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-sidebar .nav-item > .nav-link .nav-icon {
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), color .2s ease;
}
.nav-sidebar .nav-item > .nav-link:hover {
    background-color: rgba(255,255,255,.08);
    transform: translateX(3px);
}
.nav-sidebar .nav-item > .nav-link:hover .nav-icon {
    transform: scale(1.2) rotate(5deg);
    color: #ffc107;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(135deg, var(--cnc-accent) 0%, var(--cnc-accent-dark) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(13,110,253,.35);
    font-weight: 500;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover .nav-icon {
    color: #fff !important;
    transform: scale(1.15) rotate(0);
}
[class*="sidebar-dark-"] .nav-sidebar > .nav-item.menu-open > .nav-link,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item:hover > .nav-link {
    background-color: rgba(255,255,255,.06);
}

/* Alt menüler (varsa) */
.nav-sidebar .nav-treeview { position: relative; padding-left: 4px; }
.nav-sidebar .nav-treeview::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 22px;
    width: 1px; background: rgba(255,255,255,.1);
}
.nav-sidebar .nav-treeview .nav-link {
    border-radius: .4rem;
    margin: 2px 10px 2px 22px !important;
    padding: .45rem .7rem !important;
}
.nav-sidebar .nav-treeview .nav-link.active {
    background: rgba(13,110,253,.18) !important;
    color: #7fb2ff !important;
    border-left: 3px solid var(--cnc-accent);
    border-radius: 0 .4rem .4rem 0 !important;
    box-shadow: none;
    font-weight: 600;
}

.nav-header {
    font-size: .72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45) !important;
    font-weight: 700;
    padding: 1rem 1.1rem .35rem !important;
}

.nav-sidebar .badge { border-radius: 999px; font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,.25); }

.sidebar-footer-version {
    padding: .75rem 1rem;
    font-size: .72rem;
    color: rgba(255,255,255,.4);
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Üst menü — bildirim / kullanıcı açılır kutuları */
.navbar-cnc .dropdown-menu {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    margin-top: .6rem !important;
}
.navbar-cnc #navbarSummary .badge { border-radius: 999px; }
.navbar-user-trigger {
    background: rgba(255,255,255,.06);
    border-radius: 999px;
    padding: .35rem .9rem !important;
    border: 1px solid rgba(255,255,255,.08);
    transition: background-color .2s ease;
}
.navbar-user-trigger:hover { background: rgba(255,255,255,.12); }
.dropdown-header-gradient {
    background: linear-gradient(135deg, var(--cnc-accent) 0%, var(--cnc-sidebar-dark) 100%);
    padding: 1.5rem 1rem;
    text-align: center;
}

/* ==========================================================================
   MODERN DASHBOARD
========================================================================== */
.modern-stat-card {
    border-radius: 1.1rem;
    padding: 1.35rem 1.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    transition: transform .3s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s ease;
}
.modern-stat-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,.18); }
.modern-stat-card h3 { font-size: 2rem; font-weight: 800; margin: 0 0 2px; }
.modern-stat-card p { font-size: .85rem; opacity: .95; margin: 0 0 .2rem; font-weight: 500; }
.modern-stat-card small { opacity: .8; font-size: .74rem; }
.modern-stat-card .stat-icon {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    font-size: 3.2rem; opacity: .2;
}
.modern-stat-card:hover .stat-icon { transform: translateY(-50%) rotate(12deg) scale(1.08); opacity: .3; }

.bg-modern-info      { background: linear-gradient(135deg, #17a2b8 0%, #0f6674 100%); }
.bg-modern-success   { background: linear-gradient(135deg, #28a745 0%, #1c7430 100%); }
.bg-modern-danger    { background: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%); }
.bg-modern-warning   { background: linear-gradient(135deg, #fda63a 0%, #d97706 100%); }
.bg-modern-secondary { background: linear-gradient(135deg, #6c757d 0%, #495057 100%); }
.bg-modern-dark      { background: linear-gradient(135deg, #343a40 0%, #1a1e21 100%); }

.stat-card-link { display: block; height: 100%; text-decoration: none; color: inherit; }
.stat-card-link:hover { color: inherit; text-decoration: none; }

/* Tüm sayfalarda kartları tek tip modernize et (machine-card kendi stiline sahip) */
.content-wrapper .card:not(.machine-card) {
    border-radius: 1.1rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.04);
}
.content-wrapper .card:not(.machine-card) > .card-header:first-child { border-radius: 1.05rem 1.05rem 0 0; }
.content-wrapper .card:not(.machine-card) > .card-body:last-child,
.content-wrapper .card:not(.machine-card) > .card-footer:last-child,
.content-wrapper .card:not(.machine-card) > .table-responsive:last-child { border-radius: 0 0 1.05rem 1.05rem; }

/* Sayfalama (pagination) */
.pagination { flex-wrap: wrap; }
.pagination .page-link {
    border-radius: 999px !important;
    margin: 0 3px;
    border-color: transparent;
    color: var(--cnc-accent);
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--cnc-accent) 0%, var(--cnc-accent-dark) 100%);
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(13,110,253,.3);
}
.pagination .page-item.disabled .page-link { background: transparent; color: #adb5bd; }

.info-banner-modern {
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.04);
    padding: .9rem 1.4rem;
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.animate-up { animation: fadeInUp .5s ease forwards; opacity: 0; }
.delay-1 { animation-delay: .05s; }
.delay-2 { animation-delay: .12s; }
.delay-3 { animation-delay: .19s; }
.delay-4 { animation-delay: .26s; }
.delay-5 { animation-delay: .33s; }
.delay-6 { animation-delay: .40s; }