@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700&display=swap');

 
:root {
    --ui-bg: #f3f7fc;
    --ui-surface: #ffffff;
    --ui-surface-2: #f8fbff;
    --ui-border: #d9e3ef;
    --ui-text: #172236;
    --ui-muted: #60708a;
    --ui-primary: #1f214f;
    --ui-primary-2: #292b62;
    --ui-primary-soft: #e4f7f4;
    --ui-primary-3: #66dbd5;
    --ui-primary-4: #30a7c6;
    --ui-primary-5: #1f214f;
    --ui-primary-6: #57a6cb;
    --ui-shadow: 0 10px 28px rgba(18, 44, 74, 0.08);
    --linear-gradients: linear-gradient(141deg, var(--ui-primary-5) 0%, var(--ui-primary-6) 100%);
    --linear-gradient: var(--ui-primary-5);
}

body {
  background: radial-gradient(circle at top right, #eaf8ff 0%, var(--ui-bg) 42%, #eef4fb 100%);
  color: var(--ui-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.mobiletopbar {
    background: var(--linear-gradient);
}

.navbar {
  background: var(--linear-gradient);
  color: #fff;
  border: 0;
  border-bottom: 3px solid #c0c0c0;
  padding: 12px;
  border-radius: 0;
}

a:focus{
    outline: none!important;
    outline-offset: 0px!important;
}

h1, h2, h3, h4, .panel-heading {
  font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
}

/* Top bar */
.navbar.push.hidden-xs .navbar-inner {
  /* border: 1px solid rgba(255,255,255,0.6); */
  /* background: rgba(255,255,255,0.72); */
  backdrop-filter: none;
  box-shadow: none;
}

.navbar.push.hidden-xs .navbar-inner .container {
  min-height: 70px;
}

.navbar.push.hidden-xs a {
    font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
    color: #fff;
    font-weight: 600;
    margin-left: 12px;
}

.navbar.push.hidden-xs a:hover {
  color: var(--ui-primary);
  text-decoration: none;
}

/* Sidebar */
.pushy.pushy-left {
  background: linear-gradient(180deg, #f9fcff 0%, #f2f7fe 100%);
  border-right: 1px solid var(--ui-border);
}

.pushy .panel.panel-default.linkbodypanel {
  border: 0;
  box-shadow: none;
  margin-bottom: 8px;
  background: transparent;
}

.pushy .panel-heading {
  background: transparent;
  border: 0;
  padding: 0;
}

.pushy .panel-title a {
  display: block;
  border-radius: 10px;
  padding: 11px 12px;
  color: #334a68;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  transition: all .2s ease;
}

.pushy .panel-title a:hover,
.pushy .panel-title a[aria-expanded="true"] {
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  text-decoration: none;
}

.pushy .panel-body.linkbodyarea {
  background: transparent;
  border: 0;
  padding: 6px 8px 8px 8px;
}

.pushy .panel-body.linkbodyarea div a {
  display: block;
  border-radius: 8px;
  padding: 8px 10px;
  color: #476180;
  font-weight: 500;
}

.pushy .panel-body.linkbodyarea div a:hover {
  background: #eaf3ff;
  color: #0e5f8f;
  text-decoration: none;
}

/* Generic cards */
.panel.panel-default {
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--ui-shadow);
  background: var(--ui-surface);
}

.panel.panel-default .panel-heading {
  border: 0;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f7ff 100%);
  color: #1f3552;
  font-size: 14px;
  letter-spacing: .2px;
}

.panel.panel-default .panel-body {
  background: var(--ui-surface);
}

/* Buttons */
.btn {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-primary-2) 100%);
  border-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--ui-primary-3) 0%, var(--ui-primary-4) 100%);
  border-color: transparent;
}

.btn-info {
   background: var(--linear-gradient);
  border-color: transparent;
}

.btn-default {
  border-color: var(--ui-border);
  color: #355172;
  background: #f5f9ff;
}

/* Tables */
.table-responsive {
  border-radius: 10px;
}

.table {
  margin-bottom: 0;
}

.table > thead > tr > th {
  border-bottom: 1px solid #dce6f3;
  color: #637996;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700;
  background: #f8fbff;
}

.table > tbody > tr > td {
  border-top: 1px solid #ebf1f8;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fcfeff;
}

.table-hover > tbody > tr:hover {
  background-color: #eef8ff;
}

/* Dashboard-specific polish */
.modern-dashboard {
  margin-top: 20px;
}

.modern-dashboard .dash-hero {
  margin-bottom: 16px;
  border: 1px solid #d8e5f4;
  border-radius: 14px;
  background: linear-gradient(135deg, #0d6f67 0%, #119d90 100%);
  color: #fff;
  padding: 18px 20px;
  box-shadow: 0 14px 30px rgba(6, 88, 94, 0.2);
}

.modern-dashboard .dash-hero h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

.modern-dashboard .dash-hero p {
  margin: 6px 0 0;
  opacity: .92;
}

.modern-dashboard .grapharea {
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
}

.modern-dashboard .homepanelov .table td {
  padding-top: 11px;
  padding-bottom: 11px;
}

.modern-dashboard .label {
  border-radius: 999px;
  font-size: 11px;
  padding: 4px 8px;
}

.modern-dashboard .ticketactionbuttons {
  background: #f7fbff;
}

/* Search/input refresh */
.form-control {
  border: 1px solid #d3dfed;
  border-radius: 10px;
  box-shadow: none;
}

.form-control:focus {
  border-color: #85c8be;
  box-shadow: 0 0 0 3px rgba(11, 122, 111, 0.14);
}

.input-group-addon {
  border: 1px solid #d3dfed;
  /* border-left: 0; */
  background: #f6f9fe;
}

/* Webphone launcher visual integration */
.webphone-launcher {
  background: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-primary-2) 100%) !important;
  border: 0 !important;
}

/* Mobile */
@media (max-width: 991px) {
  .modern-dashboard .dash-hero h1 {
    font-size: 20px;
  }
}