/***** css custom properties — design token palette *****/
:root {
  --bg:           #f3efe6;
  --panel:        rgba(255, 252, 247, 0.92);
  --panel-border: rgba(112, 85, 49, 0.18);
  --text:         #1f1d1a;
  --muted:        #665f54;
  --accent:       #aa3f2e;
  --accent-dark:  #7c2c20;
  --accent-soft:  #f2d6c8;
  --success:      #236448;
  --error:        #982b2b;
  --info:         #305f86;
  --shadow:       0 18px 60px rgba(72, 48, 21, 0.12);
}

/* ===== global reset ===== */
* {
  box-sizing: border-box;
}

/* ===== body — base typography and layered radial gradient background ===== */
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(212, 154, 127, 0.35), transparent 32%),
    radial-gradient(circle at left bottom, rgba(112, 146, 128, 0.18), transparent 28%),
    linear-gradient(180deg, #f9f6f0 0%, var(--bg) 100%);
  font-family: Georgia, "Times New Roman", serif;
}

/* ===== a — anchor default colour ===== */
a {
  color: var(--accent-dark);
}

/* ===== shell — centred page wrapper with max width ===== */
.shell {
  max-width: 1180px;
  margin:    0 auto;
  padding:   28px 20px 56px;
}

/* ===== site-header — top bar: logo on the left, nav on the right ===== */
.site-header {
  display:         flex;
  justify-content: space-between;
  gap:             16px;
  align-items:     center;
  margin-bottom:   28px;
}

.site-header h1,
.panel h2 {
  margin:         0;
  font-weight:    600;
  letter-spacing: 0.02em;
}

/* ===== eyebrow — small uppercase label above headings ===== */
.eyebrow {
  margin:         0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size:      0.72rem;
  color:          var(--muted);
}

/* ===== header-actions — flex row for navigation buttons ===== */
.header-actions {
  display:     flex;
  gap:         12px;
  align-items: center;
}

/* ===== user-chip — pill showing the logged-in user's name ===== */
.user-chip {
  display:     inline-flex;
  align-items: center;
  border:      1px solid var(--panel-border);
  border-radius: 999px;
  padding:     10px 14px;
  background:  rgba(255, 255, 255, 0.55);
}

/* ===== panel — frosted-glass content card ===== */
.panel {
  background:    var(--panel);
  border:        1px solid var(--panel-border);
  border-radius: 20px;
  padding:       24px;
  box-shadow:    var(--shadow);
}

/* ===== auth-layout — vertically centred single-column layout for auth pages ===== */
.auth-layout {
  min-height:  70vh;
  display:     grid;
  place-items: center;
}

/* ----- constrain auth panel width */
.auth-panel {
  width: min(100%, 480px);
}

/* ===== grid-2 — responsive two-column grid ===== */
.grid-2 {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:                   20px;
  margin-bottom:         20px;
}

/* ===== form-grid — single-column form layout with consistent gap ===== */
.form-grid {
  display: grid;
  gap:     14px;
}

/* ===== label — stacked label + input pair ===== */
label {
  display:   grid;
  gap:       8px;
  font-size: 0.96rem;
}

/* ----- reset font inheritance for all interactive controls */
input,
select,
textarea,
button {
  font: inherit;
}

/* ===== inputs — shared border and background for text controls ===== */
input,
select,
textarea {
  width:       100%;
  border:      1px solid rgba(104, 82, 49, 0.26);
  border-radius: 14px;
  padding:     12px 14px;
  background:  rgba(255, 255, 255, 0.85);
}

/* ----- allow textarea to be resized vertically only */
textarea {
  resize: vertical;
}

/* ===== button — primary pill button ===== */
.button {
  width:       fit-content;
  border:      0;
  border-radius: 999px;
  padding:     12px 18px;
  color:       #fff8f1;
  background:  linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  cursor:      pointer;
}

/* ----- secondary variant: light background, bordered */
.button-secondary {
  color:      var(--text);
  background: rgba(255, 255, 255, 0.72);
  border:     1px solid var(--panel-border);
}

/* ===== flash-stack — vertical stack of flash message banners ===== */
.flash-stack {
  display:       grid;
  gap:           10px;
  margin-bottom: 20px;
}

/* ----- base flash style */
.flash {
  border-radius: 14px;
  padding:       12px 14px;
  border:        1px solid transparent;
}

/* ----- error flash variant */
.flash-error {
  background:   rgba(152, 43, 43, 0.1);
  border-color: rgba(152, 43, 43, 0.22);
}

/* ----- success flash variant */
.flash-success {
  background:   rgba(35, 100, 72, 0.1);
  border-color: rgba(35, 100, 72, 0.22);
}

/* ----- info flash variant */
.flash-info {
  background:   rgba(48, 95, 134, 0.1);
  border-color: rgba(48, 95, 134, 0.22);
}

/* ===== note / aux-link — muted secondary text ===== */
.note,
.aux-link {
  color: var(--muted);
}

/* ===== checkbox-row — horizontal wrapping row of checkbox labels ===== */
.checkbox-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       12px 18px;
}

/* ----- inline checkbox + label layout */
.checkbox-row label {
  display:        inline-flex;
  flex-direction: row;
  align-items:    center;
  gap:            8px;
}

/* ===== table-wrap — horizontal scroll wrapper for wide tables ===== */
.table-wrap {
  overflow-x: auto;
}

/* ===== table — full-width data table ===== */
table {
  width:           100%;
  border-collapse: collapse;
}

/* ----- cell padding and bottom border */
th,
td {
  padding:       12px 10px;
  text-align:    left;
  border-bottom: 1px solid rgba(104, 82, 49, 0.14);
}

/* ===== page-header — flex row with title on the left and actions on the right ===== */
.page-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             16px;
  margin-bottom:   20px;
}

/* ----- heading inside page header wraps badges inline */
.page-header h2 {
  margin:      0;
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

/* ===== detail-list — two-column definition list for key/value pairs ===== */
.detail-list {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   6px 16px;
  margin:                0;
}

/* ----- definition term: small caps label */
.detail-list dt {
  font-size:      0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--muted);
  padding-top:    2px;
}

/* ----- definition data: reset browser margin */
.detail-list dd {
  margin: 0;
}

/* ===== badge — inline status pill label ===== */
.badge {
  display:        inline-block;
  padding:        3px 10px;
  border-radius:  999px;
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  font-family:    system-ui, sans-serif;
}

/* ----- per-status colour variants */
/* ----- risk rating colour variants */
.badge-LOW    { background: rgba(35, 100, 72, 0.14);  color: var(--success); }
.badge-MEDIUM { background: rgba(170, 110, 0, 0.12);  color: #7a5500; }
.badge-HIGH   { background: rgba(152, 43, 43, 0.14);  color: var(--error); }

/* ----- per-status colour variants */
.badge-DRAFT                { background: rgba(104, 82, 49, 0.1);   color: var(--muted); }
.badge-PENDING_ISMS         { background: rgba(48, 95, 134, 0.12);  color: var(--info); }
.badge-ACTIVE_REVIEW        { background: rgba(35, 100, 72, 0.14);  color: var(--success); }
.badge-RE_EVALUATING        { background: rgba(170, 110, 0, 0.12);  color: #7a5500; }
.badge-PENDING_FINAL_REVIEW { background: rgba(100, 50, 130, 0.12); color: #5c2d91; }
.badge-COMPLETED            { background: rgba(35, 100, 72, 0.2);   color: var(--success); }
.badge-ARCHIVED             { background: rgba(60, 55, 50, 0.08);   color: var(--muted); }

/* ===== cat-picker — custom multi-category checkbox dropdown widget ===== */

/* ----- outer wrapper is relative so the panel positions against it */
.cat-picker {
  position: relative;
  display:  inline-block;
}

/* ----- trigger button matches the standard select/input height */
.cat-picker-btn {
  display:       flex;
  align-items:   center;
  gap:           6px;
  width:         100%;
  padding:       7px 10px;
  background:    #fff;
  border:        1px solid var(--panel-border);
  border-radius: 4px;
  cursor:        pointer;
  font-size:     0.9rem;
  color:         var(--text);
  text-align:    left;
}

.cat-picker-btn:hover {
  border-color: var(--accent);
}

/* ----- floating panel with checkboxes */
.cat-picker-panel {
  display:       none;
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  min-width:     220px;
  z-index:       200;
  background:    var(--panel);
  border:        1px solid var(--panel-border);
  border-radius: 6px;
  padding:       10px 14px;
  box-shadow:    var(--shadow);
}

/* ----- open state */
.cat-picker-panel.open {
  display: block;
}

/* ----- each label inside the panel */
.cat-picker-panel label {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     4px 0;
  cursor:      pointer;
  font-size:   0.88rem;
  font-weight: normal;
}

/* ===== responsive — stack header vertically on small screens ===== */
@media (max-width: 768px) {
  /* ----- stack header items vertically */
  .site-header {
    align-items:    flex-start;
    flex-direction: column;
  }

  /* ----- allow nav buttons to wrap */
  .header-actions {
    flex-wrap: wrap;
  }
}