/* /var/www/monitorsystem/public/assets/css/app.css
   Global theme for MonitorSystem (Bootstrap-compatible, dark-but-readable)
   Goal: Grafana-like, professional, NOT blinding white cards, readable text everywhere.
*/

/* ============ ACCENT + BASE ============ */
:root{
  --accent-blue:#0099ff;

  --text-main:#f1f6ff;
  --text-soft:rgba(241,246,255,0.78);
  --text-muted:rgba(241,246,255,0.62);

  /* Darker, non-blinding panel background */
  --panel-bg:rgba(0,0,0,0.34);
  --panel-bg-strong:rgba(0,0,0,0.46);
  --panel-border:rgba(255,255,255,0.14);

  --input-bg:rgba(255,255,255,0.06);
  --input-border:rgba(255,255,255,0.16);

  --shadow:0 18px 40px rgba(0,0,0,0.25);
}

/* ============ GLOBAL BACKGROUND + TEXT ============ */
html, body{ height:100%; }

body,
.ms-body{
  background:
    radial-gradient(1100px 650px at 15% 5%, rgba(64,140,255,0.28), transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(0,210,190,0.22), transparent 55%),
    radial-gradient(900px 600px at 55% 115%, rgba(160,120,255,0.14), transparent 55%),
    linear-gradient(180deg, #101b2f 0%, #0d1526 45%, #0f1b2f 100%);
  color:var(--text-main);
  min-height:100vh;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  color:#ffffff;
  font-weight:700;
}

/* Default readable text for common elements */
p, li, small, label, span, div{
  color:inherit;
}

/* ============ BOOTSTRAP TEXT OVERRIDES (CRITICAL) ============ */
.text-muted,
.text-secondary{
  color:var(--text-soft) !important;
}
.text-dark{
  color:var(--text-main) !important;
}
.text-body,
.text-body-secondary{
  color:var(--text-main) !important;
}

/* Some Bootstrap components may set backgrounds/text explicitly */
.bg-white,
.bg-light{
  background:transparent !important;
}
.text-black,
.text-black-50{
  color:var(--text-main) !important;
}

/* ============ LINKS ============ */
a{
  color:var(--accent-blue);
  text-decoration:none;
}
a:hover{
  color:#33adff;
  text-decoration:underline;
}

/* ============ GLOBAL PANELS / CARDS (DARKER, NOT WHITE) ============ */
/* Apply to all cards to avoid random white defaults */
.card{
  background:var(--panel-bg) !important;
  border:1px solid var(--panel-border) !important;
  border-radius:16px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  color:var(--text-main) !important;
}

/* Special “glass” class used in your layout */
.ms-card.glass,
.kpi-card,
.card.ms-card,
.card.kpi-card{
  background:var(--panel-bg) !important;
  border:1px solid var(--panel-border) !important;
  color:var(--text-main) !important;
}

/* Ensure card content stays readable even if Bootstrap applies a class */
.card-body,
.card-title,
.card-text{
  color:var(--text-main) !important;
}

/* Tables: keep text visible */
.table,
.table *{
  color:var(--text-main) !important;
}
.table thead th{
  color:rgba(241,246,255,0.90) !important;
}
.table td, .table th{
  border-color:rgba(255,255,255,0.10) !important;
}

/* Dropdowns / menus: darken so text remains readable */
.dropdown-menu{
  background:var(--panel-bg-strong) !important;
  border:1px solid var(--panel-border) !important;
  box-shadow:var(--shadow);
}
.dropdown-item{
  color:rgba(241,246,255,0.88) !important;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background:rgba(255,255,255,0.08) !important;
  color:#ffffff !important;
}

/* Modals */
.modal-content{
  background:var(--panel-bg-strong) !important;
  border:1px solid var(--panel-border) !important;
  color:var(--text-main) !important;
}

/* ============ AUTH / LANDING WRAPS ============ */
.ms-auth-bg,
.ms-landing-bg{
  min-height:100vh;
}

/* Logo blocks */
.ms-logo, .ms-logo-sm{
  width:40px; height:40px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(42,98,255,0.95), rgba(0,153,255,0.95));
  box-shadow:0 12px 26px rgba(0,153,255,0.18);
}
.ms-logo-sm{
  width:28px; height:28px;
  border-radius:10px;
}

/* Pills/badges */
.ms-badge,
.kpi-badge{
  border:1px solid rgba(255,255,255,0.18) !important;
  background:rgba(0,0,0,0.18) !important;
  color:rgba(241,246,255,0.86) !important;
}

/* ============ INPUTS / FORMS ============ */
.ms-input,
.form-control,
.form-select,
textarea,
input,
select{
  background:var(--input-bg) !important;
  border:1px solid var(--input-border) !important;
  color:var(--text-main) !important;
  border-radius:12px;
}

.ms-input::placeholder,
.form-control::placeholder,
textarea::placeholder,
input::placeholder{
  color:rgba(241,246,255,0.45) !important;
}

.ms-input:focus,
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus{
  border-color:rgba(0,153,255,0.55) !important;
  box-shadow:0 0 0 0.25rem rgba(0,153,255,0.18) !important;
  outline:none;
}

label,
.form-label{
  color:rgba(241,246,255,0.86) !important;
}

/* ============ ALERTS ============ */
.ms-alert,
.alert{
  background:rgba(0,0,0,0.22) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  color:var(--text-main) !important;
}

/* ============ BUTTONS ============ */
.ms-btn-primary,
.btn-primary{
  border:0 !important;
  background:linear-gradient(135deg, #0099ff, #2a62ff) !important;
  box-shadow:0 14px 28px rgba(0,153,255,0.18);
}
.ms-btn-primary:hover,
.btn-primary:hover{
  filter:brightness(1.03);
}

.btn-outline-light{
  border-color:rgba(255,255,255,0.22) !important;
  color:rgba(241,246,255,0.92) !important;
}
.btn-outline-light:hover{
  background:rgba(255,255,255,0.10) !important;
}

/* ============ DASHBOARD TOPBAR ============ */
.ms-topbar{
  background:rgba(16, 27, 47, 0.72) !important;
  backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,0.14) !important;
}

.ms-userpill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.18);
  color:var(--text-main);
}

.ms-userdot{
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(80,255,160,0.85);
  box-shadow:0 0 0 4px rgba(80,255,160,0.10);
}

.ms-role{
  font-size:0.85rem;
  color:rgba(241,246,255,0.65);
  padding-left:4px;
}

/* ============ KPI / DASHBOARD HELPERS ============ */
.kpi-label{
  font-size:0.92rem;
  color:rgba(241,246,255,0.75) !important;
  margin-bottom:8px;
}

.kpi-value{
  font-size:1.8rem;
  font-weight:800;
  letter-spacing:0.2px;
  color:var(--accent-blue) !important;
}

.kpi-sub{
  margin-top:6px;
  font-size:0.9rem;
  color:rgba(241,246,255,0.70) !important;
}

/* Small helper block */
.ms-mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  padding:2px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.20);
  display:inline-block;
  color:var(--text-main);
}

/* Landing mini cards + steps */
.ms-mini-card,
.ms-step{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--text-main);
}

.ms-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}

.ms-step-num{
  width:32px; height:32px;
  border-radius:12px;
  display:grid; place-items:center;
  background:rgba(0,153,255,0.20);
  border:1px solid rgba(0,153,255,0.35);
  font-weight:800;
  color:var(--text-main);
}

/* ============ SMALL QUALITY OF LIFE ============ */
hr{
  border-color:rgba(255,255,255,0.12) !important;
}
pre, code{
  color:rgba(241,246,255,0.92);
}