/* ========== Theme ==========
   Brand palette + base layout
   ========================== */
:root{
  --primary:#d1208d;     /* main blue (Add/Create/Update) */
  --primary-dark:#3215a0;/* export button */
  --bg:#f6f8fb;
  --card:#fff;
  --text:#1c1c1c;
  --muted:#6b7a90;
  --danger:#808080;      /* cancel */
  --ok:#1b8a5a;
}


*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
}

.container{ max-width:1100px; margin:0 auto; padding:16px }

/* ========== Top Bar & Navigation (Horizontal) ========== */
.topbar{ background:#3215a0; color:#fff }
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.sentridoLogo {
    height: 60px;
    float: left;
    margin-left: 10px;
    margin-top: -5px;
    padding-bottom: 5px;
}

.brand{ display:flex; gap:8px; align-items:center }
.brand-text{ color:#fff; text-decoration:none; font-weight:700 }

/* Ensure nav ULs are never bulleted */
nav ul{ list-style:none; margin:0; padding:0 }

/* Main horizontal menu */
ul.menu{
  display:flex;
  gap:24px;
  align-items:center;
}
ul.menu > li{ position:relative }
ul.menu > li > a{
  color:#fff;
  text-decoration:none;
  padding:10px 8px;
  display:inline-block;
}

/* Dropdown submenu */
ul.submenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:200px;
  margin:0;
  padding:8px 0;
  background:#3215a0;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
  z-index:20;
}
ul.submenu li a{
  display:block;
  padding:8px 12px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}
ul.submenu li a:hover{ background:rgba(255,255,255,.12) }

/* Active color on hover/focus for top menu items */
ul.menu > li > a:hover,
ul.menu > li > a:focus,
.menu li.has-sub:hover > a {
  background: rgba(255,255,255,0.14);
  border-radius: 8px;
  outline: none;              /* focus ring handled by bg */
  transition: background .15s ease-in-out;
}

ul.menu > li > a.is-active {
  background: rgba(255,255,255,0.22);
  border-radius: 8px;
}


/* Show submenu on hover or keyboard focus */
.menu li.has-sub:hover > .submenu,
.menu li.has-sub:focus-within > .submenu{ display:block }



/* ========== Cards, Forms, Tables ========== */
.card{
  background:var(--card);
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  padding:16px;
  margin:16px 0;
}

.card .form-inline .field > span { font-size: 12px; margin-bottom: 4px; color:#555; }
.card h3 { margin-bottom: 8px; }

.grid{ display:grid; gap:16px }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width: 760px){
  .grid-2{ grid-template-columns:1fr }
}

label{ display:block; font-weight:600; margin-bottom:6px }
.form-help{ color:var(--muted); font-size:12px }

input,select,textarea{
  width:100%;
  padding:10px;
  border:1px solid #d7deea;
  border-radius:8px;
  background:#fff;
  color:inherit;
}

.table{ width:100%; border-collapse:collapse }
.table th,.table td{
  border-bottom:1px solid #e6ecf5;
  padding:8px;
  text-align:left;
  vertical-align:top;
}
.table-scroll{ overflow:auto }

.small{ font-size:12px; color:var(--muted) }
.badge{ background:#eee; padding:4px 8px; border-radius:8px; margin-left:8px }

/* allow an element to span both columns in .grid-2 forms */
.col-span-2 { grid-column: 1 / -1; }

/* center content on a row (works nicely with .col-span-2) */
.row-center { display:flex; justify-content:center; }


/* compact button size for tight actions */
.btn-sm { padding: 6px 10px; border-radius: 8px; }

/* org picker row */
.org-picker{display:flex;align-items:center;gap:8px;margin:0 0 12px 0}
.org-picker label{font-weight:600}

/* half-width select; clamp so it never looks huge */
.select-sm{width:50%;max-width:280px;min-width:180px}


.code-wrap {
  position: relative;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  padding: 12px 12px 8px 12px;
  margin-top: 8px;
}
.code-wrap pre {
  margin: 0;
  max-height: 220px;          /* prevents super tall blocks */
  overflow: auto;             /* scroll if long */
  white-space: pre-wrap;      /* wrap long lines */
  word-break: break-word;     /* avoid overflow */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}
.code-wrap .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  background: #e2e8f0;        /* neutral */
}
.code-wrap .copy-btn:hover { background: #cbd5e1; }

/* red asterisk for required fields */
.req { color:#c62828; margin-left:4px; }

/* one place to control placeholder font */
:root{
  --ph-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* modern browsers */
input::placeholder,
textarea::placeholder{
  font-family: var(--ph-font);
  opacity: 1;              /* keep visible on Safari/iOS */
}

/* legacy prefixes (safe to include) */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{ font-family: var(--ph-font); }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder{ font-family: var(--ph-font); }
input::-ms-input-placeholder,
textarea::-ms-input-placeholder{ font-family: var(--ph-font); }

/* space between action buttons (any two .btn siblings) */
.actions .btn + .btn { margin-left: 10px; }

/* optional: remove top margin on first h3 within card, for tight headings */
h3.mt-0 { margin-top:0; }

.kpi { background:#fafafa; border:1px solid #eee; border-radius:10px; padding:12px }
.kpi-label { font-size:12px; color:#555; margin-bottom:4px }
.kpi-value { font-size:22px; font-weight:700 }
.kpi-sub   { font-size:12px; color:#666; margin-top:2px }

/* Heatmap table styling */
.table.heatmap td.hm {
  text-align: center;
  font-weight: 600;
  border: 1px solid #e5e7eb; /* subtle grid */
}

/* Band colors (no inline styles; CSP-safe) */
.heat-low       { background: #e7f7ef; color: #0f5132; }  /* light green */
.heat-med       { background: #fff3cd; color: #664d03; }  /* light amber */
.heat-high      { background: #fde2e1; color: #842029; }  /* light red */
.heat-critical  { background: #efe1ff; color: #3b0764; }  /* light purple */

/* Legend chips */
.legend { margin-top: 10px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.legend .sw {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid #e5e7eb;
}
.legend .heat-low      { background: #e7f7ef; }
.legend .heat-med      { background: #fff3cd; }
.legend .heat-high     { background: #fde2e1; }
.legend .heat-critical { background: #efe1ff; }

/* Two-up mini charts */
.chart-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .chart-row-2 { grid-template-columns: 1fr; }
}

/* Compact chart containers */
.chart-mini {
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fafafa;
}

/* Let container control size; Chart.js will fit to this */
.chart-mini .chart-canvas {
  display: block;
  width: 100%;
  height: 180px;   /* <- tweak smaller/larger here */
  max-height: 200px;
}
/* Medium chart container (slightly larger than mini pies) */
.chart-medium {
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fafafa;
}

/* Chart canvas sizing driven by container height */
.chart-medium .chart-canvas {
  display: block;
  width: 100%;
  height: 240px;   /* <-- adjust to taste (e.g., 220–260px) */
  max-height: 280px;
}
/* 4-up KPI row (collapses on smaller screens) */
.grid.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1000px) {
  .grid.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .grid.grid-4 { grid-template-columns: 1fr; }
}


/* ========== Buttons (consistent palette) ========== */
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  border:0;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  margin-top:10px; /* keeps space under previous field */
}
.btn[disabled]{ opacity:.6; cursor:not-allowed }

.btn-secondary{ background:#607d8b }
.btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,.6) }

/* Consistent actions */
.btn-add{ background:var(--primary) }       /* Add New..., Add Tip */
.btn-add:hover{filter:brightness(0.95)}

.btn-create{ background:var(--primary) }    /* Create/Update */
.btn-create:hover{filter:brightness(0.95)}

.btn-export{ background:var(--primary-dark) }
.btn-export:hover{filter:brightness(0.95)}

.btn-cancel{ background:var(--danger) }
.btn-cancel:hover{filter:brightness(0.95)}

/* inline forms + a small gap between buttons */
.d-inline { display:inline-block; }
.btn-row { display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* compact icons for toggle/verify */
.icon-toggle svg{ width:16px; height:16px; fill:#607d8b; }
.icon-verify svg{ width:16px; height:16px; fill:#1b8a5a; }

.is-disabled { opacity:.45; pointer-events:none; }

/* inline user add row */
.form-inline {
  display:flex;
  gap:12px;
  align-items:center;   /* was flex-end → center vertically with inputs */
  flex-wrap:wrap;
}
.form-inline .field { display:flex; flex-direction:column; min-width:200px; }

/* Compact filter row */
.form-inline { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; }
.select-sm { width: 180px; max-width: 220px; }
/* Icon styling */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; padding:6px; cursor:pointer; }
.icon-btn svg { display:block; width:18px; height:18px; }
.icon-clear-green svg { fill: currentColor; }
.icon-clear-green { color: #16a34a; }             /* green-600 */
.icon-clear-green:hover { color: #15803d; }       /* green-700 */

/* Add this class to the clear icon anchor */
.icon-align-center { align-self: center; }

.icon-btn svg { display: block; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; line-height:1; }


/* ========== Alerts ========== */
.alert{ padding:10px; border-radius:8px; margin:8px 0 }
.alert-bad{ background:#fdecea; color:#b71c1c }
.alert-ok{ background:#e8f5e9; color:#1b5e20 }

/* ========== Icon Buttons (edit/delete) ========== */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border:1px solid #c8d5eb;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  text-decoration:none;
  margin:0 4px;
}
.icon-btn:hover{ background:#f0f4fb }
.icon-edit svg{ width:16px; height:16px }
.icon-del{ border-color:#f3b0b0 }
.icon-del svg{
  width:14px; height:14px;
  fill:#b00020;
}
.actions .icon-btn{ margin-top:0 }

/* green "+" icon – override base icon button */
.icon-btn.icon-add {
  background: var(--ok);
  border-color: transparent;
}

/* keep it green on hover (override the generic hover) */
.icon-btn.icon-add:hover {
  background: var(--ok);
  filter: brightness(0.95);
}

/* ensure the plus stays white */
.icon-btn.icon-add svg {
  width:16px;
  height:16px;
  fill:#fff;
}

/* ========== Risk edit dropdowns width fix ========== */
#recPicker, #assetPicker {
  width: 480px;
  max-width: 100%;
}
#recPicker[multiple], #assetPicker[multiple] {
  width: 640px;
  max-width: 100%;
}


/* ========== Risk score bands ========== */
.score-low{ background:#e7f6e7 }
.score-med{ background:#fff6e0 }
.score-high{ background:#ffe5e5 }
.score-critical{ background:#ffcdd2 }

/* ========== Footer ========== */
.footer{
  color:#7c8aa5;
  font-size:14px;
  padding:24px 0 40px;
}

/* ========== Utility ========== */
.mt-0{ margin-top:0 }
.mt-1{ margin-top:4px }
.mt-2{ margin-top:8px }
.mt-3{ margin-top:12px }