/*
  MDT UI Refresh (site-wide)
  Drop-in overrides for the existing template + themes.

  Goals:
  - Consistent cards/tables/forms/buttons across all panels
  - Cleaner dispatch feed + modal readability
  - Better spacing + reduced visual noise
*/

:root{
  --mdt-radius: 16px;
  --mdt-radius-sm: 12px;
  --mdt-border: rgba(255,255,255,.10);
  --mdt-border-2: rgba(255,255,255,.07);
  --mdt-surface: rgba(255,255,255,.03);
  --mdt-surface-2: rgba(255,255,255,.06);
  --mdt-muted: rgba(255,255,255,.72);
  --mdt-text: rgba(255,255,255,.92);
  --mdt-shadow: 0 16px 40px rgba(0,0,0,.45);
  --mdt-focus: 0 0 0 3px rgba(52,152,219,.35);
}

html, body{height:100%;}
body{
  color: var(--mdt-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Links */
a{ text-decoration: none; }
a:hover{ text-decoration: none; }

/* Navbar polish (top + bottom) */
.navbar.top-navbar{
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mdt-border-2);
}
.horizontal-menu .bottom-navbar{
  background: rgba(0,0,0,.50) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mdt-border-2);
}
.navbar .navbar-brand-wrapper{ background: transparent !important; }
.navbar .navbar-menu-wrapper{ background: transparent !important; }

/* Dropdowns */
.dropdown-menu{
  border-radius: var(--mdt-radius-sm) !important;
  border: 1px solid var(--mdt-border) !important;
  background: rgba(10,10,10,.96) !important;
  box-shadow: var(--mdt-shadow);
}
.dropdown-item{ color: rgba(255,255,255,.86) !important; }
.dropdown-item:hover{ background: rgba(255,255,255,.06) !important; }
.dropdown-divider{ border-top-color: rgba(255,255,255,.08) !important; }

/* Cards / panels */
.card,
.card.card-statistics,
.content-wrapper .card{
  border-radius: var(--mdt-radius) !important;
  border: 1px solid var(--mdt-border) !important;
  background: var(--mdt-surface) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
}
.card .card-title{ letter-spacing: .01em; }
.card .card-body{ padding: 16px 18px !important; }

/* Section spacing */
.content-wrapper{ padding-top: 18px !important; }

/* Tables */
.table{ color: rgba(255,255,255,.88) !important; }
.table thead th{
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.80) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table tbody td{ border-top: 1px solid rgba(255,255,255,.06) !important; vertical-align: middle; }
.table-hover tbody tr:hover{ background: rgba(255,255,255,.03) !important; }

/* Inputs */
.form-control,
.custom-select,
.select2-container--default .select2-selection--single{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.28) !important;
  color: rgba(255,255,255,.92) !important;
}
.form-control:focus,
.custom-select:focus,
.select2-container--default .select2-selection--single:focus{
  box-shadow: var(--mdt-focus) !important;
  border-color: rgba(52,152,219,.55) !important;
}
.form-control::placeholder{ color: rgba(255,255,255,.45) !important; }

/* Buttons */
.btn{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
.btn:focus{ box-shadow: var(--mdt-focus) !important; }
.btn.btn-primary{
  background: rgba(52,152,219,.95) !important;
  border-color: rgba(52,152,219,.65) !important;
}
.btn.btn-primary:hover{ filter: brightness(1.05); }
.btn.btn-danger{ background: rgba(231,76,60,.92) !important; border-color: rgba(231,76,60,.65) !important; }
.btn.btn-success{ background: rgba(46,204,113,.92) !important; border-color: rgba(46,204,113,.65) !important; }
.btn.btn-warning{ background: rgba(241,196,15,.92) !important; border-color: rgba(241,196,15,.65) !important; }
.btn.btn-secondary{ background: rgba(255,255,255,.08) !important; }

/* Badges */
.badge{
  border-radius: 999px !important;
  padding: .45em .75em !important;
  border: 1px solid rgba(255,255,255,.12);
}
.badge[data-toggle='modal']{ cursor: pointer; }

/* Modals */
.modal-content{
  border-radius: var(--mdt-radius) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(10,10,10,.96) !important;
  box-shadow: var(--mdt-shadow);
}
.modal-header{ border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.modal-footer{ border-top: 1px solid rgba(255,255,255,.08) !important; }

/* Tabs */
.nav-tabs{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.nav-tabs .nav-link{
  border: 0 !important;
  color: rgba(255,255,255,.70) !important;
  border-radius: 999px !important;
}
.nav-tabs .nav-link.active{
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
}

/* --- Shared MDT utility components (works with existing markup) --- */
.mdt-card{
  border: 1px solid var(--mdt-border);
  border-radius: var(--mdt-radius);
  background: var(--mdt-surface);
  overflow: hidden;
}
.mdt-card-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mdt-card-title{font-weight: 800; font-size: 16px; line-height: 1.25;}
.mdt-card-sub{margin-top: 2px; font-size: 12px; color: var(--mdt-muted);}
.mdt-card-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.mdt-empty{ padding: 16px; color: var(--mdt-muted); }

.mdt-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(0,0,0,.25);
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

.mdt-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.mdt-toolbar-left{display:flex; align-items:center; gap: 12px;}
.mdt-toolbar-right{display:flex; align-items:center; gap: 10px; flex-wrap:wrap; justify-content:flex-end;}

.mdt-kpi{padding: 4px 0;}
.mdt-kpi-label{font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: var(--mdt-muted);} 
.mdt-kpi-value{margin-top: 2px;}

.mdt-badge{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.mdt-badge-success{background: rgba(46, 204, 113, .18); border-color: rgba(46, 204, 113, .35);} 
.mdt-badge-danger{background: rgba(231, 76, 60, .18); border-color: rgba(231, 76, 60, .35);} 
.mdt-badge-warning{background: rgba(241, 196, 15, .18); border-color: rgba(241, 196, 15, .35);} 
.mdt-badge-info{background: rgba(52, 152, 219, .18); border-color: rgba(52, 152, 219, .35);} 
.mdt-badge-muted{background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.75);} 

.mdt-list{display:flex; flex-direction:column; gap:10px; padding: 12px 16px 16px 16px;}
.mdt-list-item{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.25);
}
.mdt-list-item-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.mdt-list-item-title{font-weight: 800;}
.mdt-list-item-sub{margin-top: 4px; color: var(--mdt-muted); font-size: 12px;}

.mdt-calllog-box{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  padding: 10px;
}
CSS