/*
============================================================
File: nsso-main.css
Path: /assets/css/nsso-main.css
Purpose: Canonical OPS system stylesheet (NSSO)
Status: CANONICAL — OPS + ADMIN + SHARED
============================================================
*/

/* =========================
   ROOT VARIABLES
   ========================= */
:root{
  --red:#b22222;
  --gray:#3a3a3a;
  --white:#ffffff;
  --text:#1f1f1f;
  --muted:#6b6b6b;
  --border:#dddddd;
  --panel:#ffffff;
  --panel-soft:#f4f4f4;
  --success:#16a34a;
}
html, body {
  overflow-x: hidden;
}
/* =========================
   RESET
   ========================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body.ops-body{
  font-family:'Inter',sans-serif;
  background:var(--gray);
  color:var(--text);
  line-height:1.6;
}

/* =========================
   HEADER
   ========================= */
.ops-header{
  background:var(--red);
}

.ops-header-inner{
  max-width:1400px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.ops-brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:#ffffff;
}

.ops-brand img{
  height:48px;
  width:auto;
  display:block;
}

.ops-brand-name{
  font-weight:800;
  font-size:18px;
}

.ops-nav a{
  margin-left:22px;
  color:#ffffff;
  text-decoration:none;
  font-weight:600;
  opacity:.9;
}

.ops-nav a:hover{
  opacity:1;
}

/* =========================
   MAIN WRAPPER
   ========================= */
.ops-main{
  max-width:1400px;
  margin:0 auto;
  padding:40px 24px 80px;
}

/* =========================
   TYPOGRAPHY
   ========================= */
.ops-page-title{
  font-size:30px;
  font-weight:900;
  margin-bottom:6px;
}

.ops-subhead{
  color:var(--muted);
  margin-bottom:32px;
}

h2{
  font-size:22px;
  font-weight:800;
  margin-bottom:8px;
}

h3{
  font-size:18px;
  font-weight:800;
  margin-bottom:6px;
}

/* =========================
   SECTIONS
   ========================= */
.ops-section{
  background:transparent;
}

.ops-section-block{
  margin-top:48px;
}

.ops-section-note{
  color:var(--muted);
  margin-bottom:18px;
}

/* =========================
   GRID / CARDS
   ========================= */
.ops-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  margin-bottom:42px;
}

.ops-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
}

.ops-card-label{
  font-size:13px;
  color:var(--muted);
  margin-bottom:6px;
}

.ops-card-value{
  font-size:26px;
  font-weight:900;
}

.ops-card-note{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

.ops-success{
  color:var(--success);
}

/* =========================
   ACTIONS
   ========================= */
.ops-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
}

.ops-action{
  background:var(--panel-soft);
  border:1px solid var(--border);
  border-radius:18px;
  padding:26px;
  cursor:pointer;
  transition:.15s ease;
}

.ops-action:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.ops-action p{
  color:var(--muted);
}

/* =========================
   FOOTER
   ========================= */
.ops-footer{
  background:var(--red);
}

.ops-footer-inner{
  max-width:1400px;
  margin:0 auto;
  padding:26px 24px;
  text-align:center;
  color:#ffffff;
}

.ops-footer a{
  color:#ffffff;
  text-decoration:none;
  font-weight:700;
}

.ops-footer-slogan{
  margin:12px 0;
  font-style:italic;
  color:#f0f0f0;
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:768px){
  .ops-header-inner{
    flex-direction:column;
    gap:12px;
  }

  .ops-nav a{
    margin-left:0;
    margin-right:14px;
  }

  .ops-page-title{
    font-size:26px;
  }
}
/* =========================
   FORM ELEMENTS — OPS
   ========================= */
label{
  display:block;
  margin:16px 0 6px;
  font-weight:600;
}

input,
textarea{
  width:100%;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:inherit;
  font-size:14px;
}

textarea{
  min-height:120px;
}

button{
  margin-top:16px;
  padding:12px 24px;
  background:var(--red);
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
}

button:hover{
  opacity:0.9;
}
/* =========================
   ADMIN DASHBOARD EMPHASIS
   ========================= */

/* Page + section headings */
.ops-page-title,
.ops-section h2,
.ops-section-block h2 {
  color: var(--red);
}

/* Card labels (Industry Contacts, Email System, etc.) */
.ops-card-label {
  color: var(--red);
  font-weight: 700;
}

/* Action card titles */
.ops-action h3 {
  color: var(--red);
}

/* Composer labels */
.ops-section-block label {
  color: var(--red);
  font-weight: 700;
}

/* Composer helper text */
.ops-section-note,
.ops-subhead {
  color: #d1d1d1;
}
/* =========================
   EMAIL STATUS STATES
   ========================= */

.ops-status-error {
  background: #8b0000;
  color: #ffffff;
  padding: 14px 16px;
  margin-top: 18px;
  border-radius: 8px;
  font-weight: 600;
}
.ops-status-sending {
  background: #8b0000;
  color: #ffffff;
  padding: 14px 16px;
  margin-top: 18px;
  border-radius: 8px;
  font-weight: 600;
}
.ops-status-success {
  background: #14532d;
  color: #ffffff;
  padding: 14px 16px;
  margin-top: 18px;
  border-radius: 8px;
  font-weight: 600;
}
#send-status.ops-status-error,
#send-status.ops-status-success {
  color: #ffffff !important;
}
@media (max-width: 768px) {

  .material-gates {
    grid-template-columns: 1fr;
  }

}