/* ============================================================================
   hcm-tokens.css - Humly design tokens for the Cloud Portal
   Bootstrap 5.3 / AdminLTE 4

   Every value below is read from humly.com's own live stylesheet, so the portal
   inherits the brand rather than approximating it. Load AFTER adminlte.min.css
   and BEFORE hcm.css.
   ============================================================================ */

:root {
  /* ---- brand, verbatim from humly.com custom properties ---- */
  --humly-teal:        #56B3B5;   /* --teal-color   */
  --humly-teal-ink:    #2E9598;   /* darkened for 4.5:1 text on paper */
  --humly-olive:       #5C6151;   /* --olive-color, already the sidebar colour */
  --humly-earth:       #B28160;   /* --earth-color  */
  --humly-gold:        #D7A24F;   /* --gold-color   */
  --humly-sky:         #C1FEFF;   /* --sky-color    */
  --humly-paper:       #FFFCF4;   /* --white-2      */
  --humly-card:        #EFECE4;   /* --card-olive   */
  --humly-ink:         #1C1B1F;   /* --black-2      */
  --humly-ink-muted:   #8D8B89;   /* --black-3      */
  --humly-line:        #E4DFD3;
  --humly-crit:        #AE4530;   /* added - the brand has no critical colour */
  --humly-warn-ink:    #9A6A15;   /* gold, darkened for text on paper */
  --humly-ok-ink:      #3C7D68;
}

/* ---- Bootstrap 5.3 theme variables. This is the whole token layer. ---- */
:root,
[data-bs-theme="light"] {
  --bs-primary:            #56B3B5;
  --bs-primary-rgb:        86, 179, 181;
  --bs-primary-text-emphasis: #2E9598;
  --bs-link-color:         #2E9598;
  --bs-link-hover-color:   #1F7B7E;

  --bs-body-bg:            #F2EEE5;   /* app ground - warm, not AdminLTE's cold #f4f6f9 */
  --bs-body-color:         #1C1B1F;
  --bs-secondary-color:    #57544E;
  --bs-tertiary-color:     #8D8B89;
  --bs-emphasis-color:     #1C1B1F;

  --bs-border-color:       #E4DFD3;
  --bs-border-radius:      .25rem;    /* 4px, same as humly.com's buttons */
  --bs-border-radius-sm:   .1875rem;
  --bs-border-radius-lg:   .5rem;     /* 8px for cards */
  --bs-border-radius-pill: .25rem;    /* deliberately NOT a pill */

  --bs-font-sans-serif:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace:     "Azeret Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --bs-body-font-size:     .875rem;
  --bs-body-line-height:   1.55;

  --bs-success:            #3C7D68;
  --bs-warning:            #D7A24F;
  --bs-danger:             #AE4530;
  --bs-info:               #56B3B5;
}

/* ---- dark mode comes free on BS5: <html data-bs-theme="dark"> ---- */
[data-bs-theme="dark"] {
  --bs-body-bg:         #131412;
  --bs-body-color:      #F1EDE3;
  --bs-secondary-color: #BCB7AB;
  --bs-tertiary-color:  #8B8880;
  --bs-border-color:    #2E2F2A;
  --bs-primary:         #6FC7C9;
  --bs-link-color:      #6FC7C9;
}

/* ---- surfaces ---- */
.app-content, .content-wrapper { background: var(--bs-body-bg); }
.card { background: var(--humly-paper); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .card { background: #1B1C19; }
.card-header { background: transparent; border-bottom-color: var(--bs-border-color); }

/* ---- the move that makes a data screen read as Humly rather than as Bootstrap:
       every number, id, version and timestamp in Azeret Mono, tabular ---- */
.font-monospace, .mono, code, kbd, samp,
.table td.num, .table th.num,
.info-box-number, .small-box .inner h3 {
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* uppercase micro-label, used for column heads and panel titles */
.lbl {
  font-family: var(--bs-font-monospace);
  font-size: .625rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--bs-tertiary-color);
}

/* ---- tables: mono heads, mono timestamps, no zebra ---- */
.table > thead > tr > th {
  font-family: var(--bs-font-monospace);
  font-size: .625rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bs-tertiary-color);
  border-bottom-color: var(--bs-border-color);
  white-space: nowrap;
}
.table > tbody > tr > td { border-bottom-color: var(--bs-border-color); }

/* ---- chips: state, in mono, never a pill ---- */
.badge {
  font-family: var(--bs-font-monospace);
  font-weight: 500; font-size: .656rem;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: .1875rem;
}

/* ---- flag strip: booleans and non-default settings, promoted to the header ---- */
.hy-flags { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.hy-flag {
  display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
  font-family: var(--bs-font-monospace); font-size: .625rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .25rem .4375rem; border-radius: .1875rem;
  border: 1px solid var(--bs-border-color); background: transparent;
  color: var(--bs-tertiary-color);
}
.hy-flag.on   { border-color: transparent; background: #E2EFE9; color: var(--humly-ok-ink); }
.hy-flag.attn { border-color: transparent; background: #F6EBD5; color: var(--humly-warn-ink); }
.hy-flag.off  { text-decoration: line-through; opacity: .75; }

/* ---- rich-text / free-text well: full width, capped height, own scroll ---- */
.hy-richtext {
  background: var(--humly-card); border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius); padding: .6875rem .8125rem;
  font-size: .8125rem; line-height: 1.65;
  max-height: 132px; overflow-y: auto; overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .hy-richtext { background: #191A17; }
.hy-richtext:empty::before { content: "No notes"; color: var(--bs-tertiary-color); }

/* ---- record metadata line: what is left of the audit log on the page ---- */
.hy-metaline {
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
  padding-top: .5625rem; margin-top: .25rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: .719rem; color: var(--bs-tertiary-color);
}

/* ---- sidebar keeps the brand olive it already has ---- */
.app-sidebar { background-color: var(--humly-olive); }

/* ---- info-box preferred over small-box on dense pages:
       four saturated colour blocks fight a data screen ---- */
.info-box { background: var(--humly-paper); border: 1px solid var(--bs-border-color); box-shadow: none; }
[data-bs-theme="dark"] .info-box { background: #1B1C19; }
.info-box-number { font-size: 1.3125rem; font-weight: 500; }