:root{
  --accent:#8bd124;
  --accent-hover:#7cc71f;
  --accent-active:#6fb71b;
  --bg-light:#f4f4f4;
}

body{background:var(--bg-light);min-height:100vh;}
.navbar{background:#fff;border-bottom:1px solid #eee;}
.app-container{padding-left:2rem;padding-right:2rem;}
@media (max-width:991.98px){.app-container{padding-left:1rem;padding-right:1rem;}}

.app-logo{
  width:200px;
  height:auto;
  display:block;
  max-width:40vw;
}
@media (max-width:575.98px){
  .app-logo{width:160px;}
}

.btn-accent,
.btn-accent:focus,
.btn-accent:active{
  background-color:var(--accent);
  border-color:var(--accent);
  color:#000;
}
.btn-accent:hover{
  background-color:var(--accent-hover);
  border-color:var(--accent-hover);
  color:#000;
}
.btn-accent:active{
  background-color:var(--accent-active)!important;
  border-color:var(--accent-active)!important;
  color:#000!important;
}

.app-shell{display:flex;gap:2rem;}
@media (max-width:991.98px){.app-shell{flex-direction:column;}}
.sidebar{background:#fff;border-radius:16px;padding:1.5rem 1.25rem;box-shadow:0 20px 45px rgba(25,25,25,0.07);min-width:240px;}
.sidebar .nav-link{border-radius:12px;padding:.75rem 1rem;color:#333;font-weight:600;display:flex;align-items:center;justify-content:space-between;transition:all .15s ease-in-out;}
.sidebar button.nav-link{cursor:pointer;width:100%;}
.sidebar .nav-link:hover:not(.active){background:rgba(139,209,36,.12);color:#111;}
.sidebar .nav-link.active{background:var(--accent);color:#000;box-shadow:0 10px 24px rgba(139,209,36,.35);}
.content-area{flex:1;min-width:0;}

.card{border-radius:18px;border:none;box-shadow:0 18px 50px rgba(25,25,25,0.08);}
.small-note{font-size:.9rem;color:#666;}

.section-title{
  font-weight:600;
  margin-bottom:1.25rem;
}

.content-view{display:none;}
.content-view.active{display:block;}

table.table thead th{
  background:#fff;
  position:sticky;
  top:0;
  z-index:1;
}

.datetime{min-width:220px;}

.srt-table thead th{font-size:.85rem;text-transform:uppercase;color:#6c757d;background:#f8f9fa;border-bottom:0;}
.srt-table thead th.sortable,
.pid-table thead th.sortable,
#dvrTable thead th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
.srt-table thead th.sortable:hover,
.pid-table thead th.sortable:hover,
#dvrTable thead th.sortable:hover{background:rgba(139,209,36,.1);}
.srt-table thead th.sort-asc::after,
.pid-table thead th.sort-asc::after,
#dvrTable thead th.sort-asc::after{content:" ▲";font-size:.65em;opacity:.65;}
.srt-table thead th.sort-desc::after,
.pid-table thead th.sort-desc::after,
#dvrTable thead th.sort-desc::after{content:" ▼";font-size:.65em;opacity:.65;}
.srt-status-badge{font-size:.75rem;padding:.35rem .6rem;border-radius:999px;text-transform:capitalize;}
.srt-status-online{background:rgba(13,160,61,.12);color:#0a7d38;}
.srt-status-pending{background:rgba(255,194,23,.2);color:#b28405;}
.srt-status-offline{background:rgba(220,53,69,.15);color:#b02a37;}
.srt-status-paused{background:rgba(108,117,125,.15);color:#5c636a;}
.srt-status-unknown{background:rgba(108,117,125,.1);color:#5c636a;}
.btn-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:1rem;}
.toast{max-width:min(600px,90vw);}
.toast-body{overflow-wrap:anywhere;word-break:break-word;}