:root{
  --theme-header-bg:#0f4f88;
  --theme-sidebar-bg:#f3f3f3;
  --theme-body-bg:#e9edf2;
}

body.admin-body{
  margin:0;
  background:var(--theme-body-bg);
  font-family:Arial,Helvetica,sans-serif;
  color:#243447;
}

.topbar{
  height:48px;
  background:var(--theme-header-bg);
  color:#fff;
  display:flex;
  align-items:center;
  padding:0 10px;
  border-bottom:1px solid rgba(0,0,0,.15);
}

.brand{
  font-weight:700;
  margin-right:18px;
  font-size:22px;
  line-height:1;
  letter-spacing:.2px;
}

.topnav{
  display:flex;
  align-items:center;
  gap:0;
}

.topnav a{
  color:#fff;
  text-decoration:none;
  font-size:16px;
  padding:0 10px;
  line-height:48px;
  opacity:.95;
}
.topnav a:hover{background:rgba(255,255,255,.08)}

.topnav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding-left:8px;
}

.topnav-right a{
  color:#fff;
  text-decoration:none;
  font-size:15px;
  line-height:48px;
  padding:0 8px;
  opacity:.95;
}
.topnav-right a:hover{background:rgba(255,255,255,.08)}

.settings-link{
  border-left:1px solid rgba(255,255,255,.25);
  margin-left:4px;
  padding-left:12px !important;
}

.help-link{
  width:32px;
  text-align:center;
  font-weight:700;
  font-size:18px !important;
}

.toggle-btn{
  background:transparent;
  border:0;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  width:34px;
  height:34px;
  border-radius:4px;
}
.toggle-btn:hover{background:rgba(255,255,255,.12)}

.admin-wrap{display:flex;min-height:calc(100vh - 48px)}

.sidebar{
  width:230px;
  background:var(--theme-sidebar-bg);
  border-right:1px solid #d6dbe2;
  padding:10px;
}
.sidebar a{
  display:block;
  color:#1f3d5a;
  text-decoration:none;
  padding:6px 4px;
}
.sidebar-section-title{font-weight:700;color:#555;margin:6px 0}
.sidebar .small{font-size:12px;color:#666}
.sidebar .mt{margin-top:14px}

.main-content{flex:1;padding:14px}

.notice{
  background:#cfeefd;
  border:1px solid #b7dfef;
  padding:12px;
  border-radius:4px;
  margin-bottom:12px;
}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.kpi{border-radius:4px;color:#fff;padding:14px;display:flex;flex-direction:column}
.kpi strong{font-size:28px;line-height:1}
.kpi span{font-size:14px;margin-top:6px}
.kpi.green{background:#4caf50}
.kpi.pink{background:#d84b8b}
.kpi.amber{background:#d69a2d}
.kpi.cyan{background:#68b7be}

.panel{
  background:#fff;
  border:1px solid #d9dee5;
  border-radius:4px;
  padding:14px;
  margin-bottom:12px;
}

.table-clean{width:100%;border-collapse:collapse}
.table-clean th,.table-clean td{border-bottom:1px solid #e6eaf0;padding:8px;text-align:left}

/* Settings page cards */
.page-title-wrap{margin-bottom:14px}
.page-title{margin:0;font-size:28px;font-weight:600;color:#1f2f3f}
.page-subtitle{margin:4px 0 0;color:#5f6f80;font-size:14px}

.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#fff;
  border:1px solid #d8e0ea;
  border-radius:6px;
  padding:12px;
  text-decoration:none;
  color:#243447;
  transition:.15s ease;
  min-height:94px;
}
.settings-card:hover{
  border-color:#9bc0df;
  box-shadow:0 2px 10px rgba(15,79,136,.10);
  transform:translateY(-1px);
  text-decoration:none;
}
.settings-card-icon{
  width:34px;height:34px;border-radius:6px;background:#e8f2fb;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 34px;
}
.settings-card-body h3{margin:0 0 4px;font-size:17px;font-weight:600;line-height:1.2}
.settings-card-body p{margin:0;color:#4f6277;font-size:13px;line-height:1.35}
.settings-card-arrow{margin-left:auto;color:#6b86a3;font-size:24px;line-height:1;padding-top:2px}

/* Theme color form */
.color-grid{display:grid;grid-template-columns:1fr;gap:12px}
.color-item{padding:10px;border:1px solid #e1e7ef;border-radius:6px;background:#fafcfe}
.color-controls{display:flex;gap:10px;align-items:center;margin-top:8px}
.color-controls input[type="color"]{width:52px;height:38px;border:0;background:transparent;padding:0}
.color-controls input[type="text"]{
  width:120px;padding:8px;border:1px solid #c7d3e2;border-radius:6px;
  font-family:monospace;text-transform:uppercase
}
.theme-preview{margin-top:14px;border:1px solid #ccd6e2;border-radius:6px;overflow:hidden}
.theme-preview-top{height:44px;display:flex;align-items:center;padding:0 12px;color:#fff;font-weight:600}
.theme-preview-main{display:flex;min-height:120px}
.theme-preview-side{width:180px;padding:10px;font-weight:600}
.theme-preview-body{flex:1;padding:10px}

@media (max-width:1100px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .settings-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sidebar{display:none}
  .kpi-row{grid-template-columns:1fr}
}

.btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:4px;
  text-decoration:none;
  border:1px solid transparent;
}
.btn-primary{
  background:#1f5f97;
  border-color:#1f5f97;
  color:#fff;
}
.btn-primary:hover{background:#184b76;border-color:#184b76}
.btn-sm{font-size:13px;padding:6px 10px}

/* Settings > General */

.settings-tabs{
  display:flex;
  gap:8px;
  border-bottom:1px solid #d9dee5;
  margin-bottom:12px;
  padding-bottom:8px;
  flex-wrap:wrap;
}
.settings-tab{
  border:1px solid #cfd8e3;
  background:#f7f9fc;
  color:#2a3d52;
  border-radius:6px;
  padding:7px 12px;
  cursor:pointer;
}
.settings-tab.active{
  background:#1f5f97;
  color:#fff;
  border-color:#1f5f97;
}

.settings-tab-panel{display:none;}
.settings-tab-panel.active{display:block;}


/* Unified standalone field styling (for pages not using .form-field wrapper) */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea{
  border:1px solid #cfd8e3;
  border-radius:6px;
  padding:8px 10px;
  background:#fff;
  font-size:14px;
  line-height:1.2;
  box-sizing:border-box;
  min-height:38px;
}


.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field.full{grid-column:1/-1;}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea{
  width:100%;
  border:1px solid #cfd8e3;
  border-radius:6px;
  padding:8px 10px;
  background:#fff;
}
.form-field small{color:#647689;}
.toggle-field label{font-weight:600;}

.log-console{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  background:#0f1720;
  color:#0F4F88;
}

@media (max-width:900px){
  .form-grid{grid-template-columns:1fr;}
}

.settings-tab-panel{display:none;}
.settings-tab-panel.active{display:block;}
.settings-tab.active{ /* styled active tab */ }

/* Logo */
.brand-logo-link{
  display:inline-flex;
  align-items:center;
  min-height:48px;
}
.brand-logo-img{
  max-height:40px;
  max-width:180px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.brand-text{
  font-size:48px;
  font-weight:700;
  line-height:1;
  color:#fff;
}

.settings-tab-panel { display:none; }
.settings-tab-panel.active { display:block; }

/*Health Check Graphical */
.health-progress-wrap { max-width: 760px; }
.health-progress-track {
  width: 100%;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  min-height: 42px;
  border: 1px solid #d1d5db;
}
.health-progress-fill {
  width: 0%;
  min-height: 42px;
  background: var(--bar-color, #6BC552);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(.22,.61,.36,1);
  white-space: nowrap;
}
.health-progress-text {
  font-weight: 700;
  color: #fff;
  padding: 0 12px;
  font-size: 15px;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}

.btn-secondary{
  background:#7b8794;
  border-color:#7b8794;
  color:#fff;
}
.btn-secondary:hover{background:#667380;border-color:#667380}