:root {

    --nx-success: #198754;
    --nx-primary: #84cc16;
    --nx-warning: #f59e0b;
    --nx-danger:  #dc3545;
	--nx-secondary:  #6c757d;

}
body{background:#f5f7fb;font-family:Arial,sans-serif}
.app{display:flex;min-height:100vh}
.sidebar{width:240px;background:linear-gradient(180deg,#061a3b,#0b2248);padding:20px}
.brand{font-size:48px;font-weight:700;color:#fff}
.brand-sub{color:#dbeafe;margin-bottom:25px}
.sidebar a{display:block;color:#fff;text-decoration:none;padding:14px;border-radius:12px;margin-bottom:6px}
.sidebar a:hover,
.sidebar a.active {background:#2563eb}
.content{flex:1;padding:30px}
.table { margin-bottom: 0;}
.nx-success{
    color: var(--nx-success);
}
.nx-primary{
    color: var(--nx-primary);
}
.nx-warning{
    color: var(--nx-warning);
}
.nx-danger{
    color: var(--nx-danger);
}
.text-nx-success { color: var(--nx-success); }
.text-nx-primary { color: var(--nx-primary); }
.text-nx-warning { color: var(--nx-warning); }
.text-nx-danger  { color: var(--nx-danger); }

.bg-nx-success { background: var(--nx-success); }
.bg-nx-primary { background: var(--nx-primary); }
.bg-nx-warning { background: var(--nx-warning); }
.bg-nx-danger  { background: var(--nx-danger); }

.website-header {

    padding: 8px 0 0 0;

}

.website-header h1 {

    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: .5rem;

}

.kpi,.panel{background:#fff;border-radius:18px;box-shadow:0 3px 12px rgba(0,0,0,.08)}
.kpi{padding:20px;border-bottom:4px solid #22c55e}
.kpi.orange{border-color:#f59e0b}
.kpi.red{border-color:#ef4444}

.kpi.border-nx-success{
    border-bottom:4px solid var(--nx-success);
}

.kpi.border-nx-primary{
    border-bottom:4px solid var(--nx-primary);
}

.kpi.border-nx-warning{
    border-bottom:4px solid var(--nx-warning);
}

.kpi.border-nx-danger{
    border-bottom:4px solid var(--nx-danger);
}
.kpi.border-nx-secondary{
    border-bottom:4px solid var(--nx-secondary);
}

.n{font-size:34px;font-weight:700}
.panel{padding:20px}
.web{padding:10px 0;border-bottom:1px solid #eee}

/* ----------------------------------------------------------
   KPI Small
---------------------------------------------------------- */

.kpi.small {

    background: #fff;
    border-radius: 14px;
    padding: 10px 24px;
    transition: .2s;

}
.kpi.small div {
    display: inline-block;
	vertical-align: middle;
}

.kpi.small .n {

    font-size: 30px;
    font-weight: 700;
    line-height: 1;
	margin-right: 10px;

}

.kpi.small .label {

    color: #6c757d;
    font-size: 14px;
    font-weight: 500;

}
/* Button */
.btn-purple {

    color: #fff;
    background-color: #6f42c1;
    border-color: #6f42c1;

}

.btn-purple:hover {

    color: #fff;
    background-color: #5e35b1;
    border-color: #5e35b1;

}

.btn-purple:focus,
.btn-purple:active {

    color: #fff;
    background-color: #5e35b1;
    border-color: #5e35b1;
    box-shadow: 0 0 0 .2rem rgba(111, 66, 193, .25);

}

/* Website */
.website-card{
    background:#fff;
    border-radius:20px;
    padding:22px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:.2s;
    height:100%;
}

.website-card:hover{
    transform:translateY(-3px);
}

.website-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:20px;
}

.website-name{
    font-size:18px;
    font-weight:700;
}

.website-url{
    font-size:13px;
    color:#6b7280;
}

.website-info{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:20px;
}

.health-block{
    margin-bottom:20px;
}

.website-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.status{
    width:12px;
    height:12px;
    border-radius:50%;
}

.status.online{
    background:#22c55e;
}

.status.offline{
    background:#ef4444;
}

.extension-card{
    background:#f8fafc;
    border-radius:14px;
    padding:18px;
    text-align:center;
    height:100%;
    border:1px solid #e5e7eb;
}

.ext-icon{
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px;
    font-weight:700;
}

.ext-icon.success{
    background:#dcfce7;
    color:#15803d;
}

.ext-icon.danger{
    background:#fee2e2;
    color:#dc2626;
}

.ext-name{
    font-weight:600;
}

.ext-version{
    font-size:13px;
    color:#64748b;
}
.history-link {
    margin-right: 8px;
    font-size: .875rem;
	text-decoration: none;
}
.report-open {
    background: #f8fafc;
}

/* Login */
.password-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #adb5bd;
    cursor: pointer;
    font-size: 15px;
    transition: color .2s;
    z-index: 5;
}

.password-toggle:hover {
    color: #6c757d;
}

/* Sidebar submenu */

.sidebar .submenu {
    display: block;
    margin: 2px 10px 2px 12px;
    padding: 8px 14px;
    border-radius: 10px;
}

.sidebar .submenu:hover {

    color: #fff;

}

.sidebar .submenu.active {
    background: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 600;
}
.menu-arrow {

    float: right;

    margin-top: 4px;

    transition: transform .25s ease;

}

/* Otevřené menu */

a[aria-expanded="true"] .menu-arrow {

    transform: rotate(180deg);

}

.panel-title {

    display: flex;
    align-items: center;

    font-size: 1.6rem;
    font-weight: 700;

    margin-bottom: 1rem;

}

.panel-title i {

    font-size: 1.3rem;

}


/* ----------------------------------------------------------
   Navigace detailu webu
---------------------------------------------------------- */
.card-body.nav {
	padding-bottom: 0 !important;

} 
.nx-subnav {

    display: flex;
    align-items: center;
    gap: 16px;

}

.nx-subnav a {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 14px 10px;

    color: #6c757d;
    text-decoration: none;
    font-weight: 500;

    border-bottom: 3px solid transparent;

    transition: .2s ease;

}

.nx-subnav a:hover {

    color: var(--bs-primary);

}

.nx-subnav a.active {

    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    font-weight: 600;

}

.nx-subnav i {

    font-size: 15px;

}

/* ----------------------------------------------------------
   Rychlé akce
---------------------------------------------------------- */

.nx-action-card{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    height:120px;

    border:1px solid #e9ecef;
    border-radius:14px;

    background:#fff;

    transition:.2s;

}

.nx-action-card:hover{

    border-color:var(--bs-primary);
    transform:translateY(-2px);

    box-shadow:0 .5rem 1rem rgba(0,0,0,.08);

}

.nx-action-card .icon{

    font-size:46px;
    margin-bottom:0;

}

.nx-action-card .title{

    color:#212529;
    font-weight:600;
    text-align:center;

}

.text-purple{

    color:#7c3aed;

}

/* NX Security detail */
.table-hover > tbody > tr.compare-detail:hover > td,
.table-hover > tbody > tr.compare-detail:hover > th {
    --bs-table-hover-bg: transparent;
    background-color: transparent !important;
}

/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

#overlay {

    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .6);
    z-index: 99999;

}

#overlay.d-none {

    display: none !important;

}

#overlay .overlay-content {

    width: 500px;
    max-width: 90vw;
    text-align: center;
    color: #fff;
    padding: 2rem;

}

#overlayTitle {

    margin-bottom: 1rem;

}

#overlayText {

    color: rgba(255, 255, 255, .75);

}

#overlay .progress {

    width: 100%;
    height: 12px;
    margin: 2rem auto .75rem;
    border-radius: 999px;
    overflow: hidden;

}

#overlayProgress {

    color: #fff;
    font-weight: 600;
    text-align: center;

}