/* ================================================================
   HIOX Announcement & Case Study Tool
   Fonts, colors and typography extracted directly from hiox.com CSS
   ================================================================

   FONT: System stack — exactly as hiox.com declares it
   body font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted",
                     "Segoe UI", "Liberation Sans", sans-serif
   headings: same stack, font-weight:600

   TEXT COLORS from hiox.com:
     Body text:     #484848
     Headings:      #525252  /  #101210
     Links:         #101010  (no underline)
     Muted/label:   #6c757d  /  #818181

   BRAND (cloud theme --bg-main-color: green; header border: green)
     Primary green:   #2e9600  (hiox cloud footer gradient start)
     Accent green:    #74b525  (loader circle, scroll bar)
     Orange accent:   #ff7220  (hiox cloud --bg-main-color)
     Hero bg:         linear-gradient(135deg,#F0FAF3 0%,#F1FFF6 45%,#81ECAD 100%)
     CTA button bg:   #FFD814  color:#111111  (proceed_btn / buynow_btn)
     Primary button:  green bg, white text  (section-button style)
   ================================================================ */

/* ── System font stack — identical to hiox.com body declaration ─ */
:root {
  --f:   -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI",
         "Liberation Sans", sans-serif;
  --fmono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* ── hiox.com exact brand colours ──────────────────────────── */
  --green:     #2e9600;   /* cloud footer gradient, primary action  */
  --green2:    #74b525;   /* loader, scroll bar, lighter green      */
  --green-d:   #1f6600;   /* hover darken                           */
  --green-l:   #f0faf3;   /* hero bg start, light fill              */
  --green-l2:  #e8f5ee;   /* pill bg, active bg                     */
  --green-b:   #c3dece;   /* borders, dividers                      */
  --green-l2:  #e8f5ee;   /* alias for active/pill bg               */

  --orange:    #ff7220;   /* hiox cloud --bg-main-color             */
  --orange-d:  #d45a00;
  --orange-l:  #fff4eb;
  --orange-b:  #fac89a;
  /* Aliases used in PHP templates */
  --s-ok-bg:  #d1e7dd; --s-ok-fg: #0a3622;
  --s-dr-bg:  #fff3cd; --s-dr-fg: #664d03;
  --s-ar-bg:  #e9ecef; --s-ar-fg: #495057;
  --s-er-bg:  #f8d7da; --s-er-fg: #58151c;

  --gold:      #FFD814;   /* proceed_btn / buynow_btn bg            */
  --gold-d:    #e5c000;

  /* ── Text colours (hiox.com) ────────────────────────────────── */
  --t:    #484848;   /* body text — p, li                          */
  --th:   #525252;   /* heading colour h2/h3                       */
  --th2:  #101210;   /* darker heading h1, h4                      */
  --tl:   #818181;   /* muted, --bg-service-section-p              */
  --tm:   #6c757d;   /* --bs-secondary                             */
  --ta:   #101010;   /* link colour                                */

  /* ── Surfaces ───────────────────────────────────────────────── */
  --wh:   #ffffff;
  --bg:   #f8f9fa;   /* --bs-gray-100                              */
  --bg2:  #f4f7fd;   /* --vtc-bg-common-2                          */
  --bg3:  #f0faf3;   /* hero gradient start                        */

  /* ── Borders ────────────────────────────────────────────────── */
  --bd:   #dee2e6;   /* --bs-border-color                          */
  --bd2:  #e7e7e7;   /* --vtc-border-3 / --bg-header-border        */
  --bd3:  #DDE1E9;   /* --vtc-border-1                             */

  /* status vars defined above alongside green-l2 */

  /* ── Geometry ───────────────────────────────────────────────── */
  --r:    5px;    /* hiox uses border-radius:5px on most elements  */
  --rl:   10px;
  --rp:   999px;
  --xs:   0 1px 3px rgba(0,0,0,.07);
  --sm:   0 2px 8px rgba(0,0,0,.09);
  --md:   rgba(67,71,85,.27) 0px 0px .25em, rgba(90,125,188,.05) 0px .25em 1em;
  --sw:   255px;
  --hh:   60px;     /* hiox sticky header ~60px                    */
  --tr:   .3s ease-out;   /* hiox uses transition:0.3s ease-out    */
}

/* ── Reset (follows hiox.com *,::after,::before) ──────────────── */
/**, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--f);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--t);
  background: var(--wh);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}*/

/* hiox.com: a{ color:#101010; text-decoration:none; transition:0.3s ease-out } */
/*a { color: var(--ta); text-decoration: none; transition: var(--tr); }
a:hover { color: var(--green); text-decoration: none; }*/

/* hiox.com h1-h6 */
/*h1,h2,h3,h4,h5,h6 {
  font-family: var(--f);
  font-weight: 600;
  line-height: 1.2;
  color: var(--th2);
  margin: 0;
  transition: var(--tr);
}
h1 { font-size: clamp(30px,4vw,50px); }
h2 { font-size: clamp(24px,3vw,35px); color: var(--th); }
h3 { font-size: clamp(20px,2.5vw,30px); color: var(--th); }
h4 { font-size: 24px; color: var(--th2); }
h5 { font-size: 20px; }
h6 { font-size: 18px; }*/

/* hiox.com p */
/*p {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--t);
  font-weight: 400;
  margin: 0 0 1rem;
  line-height: 26px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; display: block; }
button, input, select, textarea { font-family: var(--f); font-size: inherit; }
button { border-radius: 0; cursor: pointer; }*/

/* ── Tool bar (replaces full site header — per spec no header on public) ── */
.tool-bar {
  display: none;
  background: var(--wh);
  border-bottom: 2px solid var(--green);
  box-shadow: rgba(0,0,0,.08) 0px 2px 4px;
  position: sticky; top: 0; z-index: 810;
}
.tool-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem; height: var(--hh);
  width: 100%;
}
.tool-bar-title {
  font-size: 16px; font-weight: 600; color: var(--th2);
  text-decoration: none; display: flex; align-items: center; gap: .4rem;
}
.tool-bar-title:hover { color: var(--green); text-decoration: none; }
.tool-bar-admin {
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--green); border-radius: var(--r);
  padding: 5px 12px; color: var(--green);
  transition: var(--tr); text-decoration: none;
}
.tool-bar-admin:hover { background: var(--green); color: #fff; text-decoration: none; }

/* ── "Categories" toggle — left of tool title on mobile ─────── */
.sb-toggle {
  display: none;
  align-items: center; gap: .35rem;
  background: none; border: none;
  font-size: 13px; font-weight: 600; color: var(--th2);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  padding: 6px 2px; font-family: var(--f);
}
.sb-toggle:hover { color: var(--green); }

/* ── Shell ──────────────────────────────────────────────────── */
.shell { display: flex; min-height: calc(100vh - var(--hh)); }

/* ── Severity badge (security) ──────────────────────────────── */
.sev-badge {
  display: inline-block; padding: 2px 7px;
  border-radius: var(--r); font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
}
/* ── Incident status badge ──────────────────────────────────── */
.inc-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: 2px 8px; border-radius: var(--r);
  font-size: 11px; font-weight: 700;
}
.sb {
  width: var(--sw); flex-shrink: 0;
  background: var(--wh);
  border-right: 1px solid var(--bd2);
  padding: .85rem 0 2rem;
  position: sticky; top: var(--hh);
  height: calc(100vh - var(--hh));
  overflow-y: auto;
}
/* Subtle scrollbar */
.sb::-webkit-scrollbar { width: 4px; }
.sb::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 4px; }

/* ── Sidebar tree — section-based (all tools visible) ─────────── */

/* Section header — navigates to tool root */
.sb-section { border-bottom: 1px solid var(--bd2); }
.sb-section-hdr {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem 1rem .55rem;
  font-size: 13px; font-weight: 600; color: var(--t);
  text-decoration: none; background: var(--bg);
  transition: background var(--tr), color var(--tr);
}
.sb-section-hdr:hover { color: var(--green); text-decoration: none; background: var(--bg2); }
/* Active section header */
.sb-section.op .sb-section-hdr { color: var(--green); background: var(--green-l2); }
.sb-section-hdr .cc {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--green-l2); color: var(--green);
  border-radius: var(--rp); padding: 1px 7px; min-width: 18px; text-align: center;
}
.sb-section.op .sb-section-hdr .cc { background: var(--wh); }

/* Section body — hidden when section is closed */
.sb-section-body { display: none; padding: .25rem 0 .4rem; }
.sb-section.op .sb-section-body { display: block; }

/* "All …" link inside open section */
.sr-all {
  display: flex; align-items: center; gap: .38rem;
  padding: .36rem .9rem .36rem 1rem;
  font-size: 13px; font-weight: 500; color: var(--t2);
  text-decoration: none; transition: var(--tr);
  border-left: 2px solid transparent;
}
.sr-all:hover { background: var(--green-l2); color: var(--green); text-decoration: none; }
.sr-all.on    { background: var(--green-l2); color: var(--green); border-left-color: var(--green); font-weight: 600; }

/* Category / type rows inside section */
.sr {
  display: flex; align-items: center; gap: .38rem;
  padding: .34rem .85rem .34rem 1.5rem;
  font-size: 13px; font-weight: 400; color: var(--t);
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: var(--tr);
}
.sr:hover { background: var(--bg2); color: var(--green); border-left-color: var(--green-b); text-decoration: none; }
.sr.on    { background: var(--green-l2); color: var(--green); border-left-color: var(--green); font-weight: 600; }
.sb-dot   { width: 4px; height: 4px; border-radius: 50%; background: var(--bd); flex-shrink: 0; }
.sr.on .sb-dot { background: var(--green); }

/* Inner label (By Status / By Type inside incidents) */
.sb-lbl-inner {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tm);
  padding: .55rem 1rem .2rem;
}

.sc2 {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--orange-l); color: var(--orange);
  border-radius: var(--rp); padding: 1px 6px;
}
.sb-sep { height: 1px; background: var(--bd2); margin: .5rem .85rem; }
/* Keep .cc for section header badge (defined above) */
.cc {
  font-size: 11px; font-weight: 700;
  background: var(--green-l2); color: var(--green);
  border-radius: var(--rp); padding: 1px 7px; min-width: 18px; text-align: center;
}

/* ── Main content ────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; padding: 1.5rem 2rem 3rem; background: var(--wh); }

/* ── Hero band (matches hiox cloud hero gradient) ───────────── */
.page-hero {
  background: linear-gradient(135deg, #F0FAF3 0%, #F1FFF6 45%, #e8fdf0 100%);
  border-bottom: 1px solid var(--bd2);
  padding: 1.5rem 2rem 1.35rem;
  margin: -1.5rem -2rem 1.5rem;
}
.page-hero h1 {
  font-size: clamp(22px, 3vw, 30px);
  color: var(--th);  /* #525252 */
  font-weight: 600;
  margin-bottom: .25rem;
  display: flex; align-items: center; gap: .45rem;
}
/* hiox .section-title h5 style */
.page-hero-sub {
  font-size: 14px; color: var(--tl);
  font-weight: 400;
  text-align: left;
}
.page-hero-sub strong { color: var(--th); font-weight: 600; }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.bc {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .28rem; font-size: 13px; color: var(--tm);
  margin-bottom: .85rem;
}
.bc a { color: var(--green); }
.bc a:hover { text-decoration: underline; }
.bc .sep { color: var(--bd); }

/* ── Announcement list ───────────────────────────────────────── */
.al { display: flex; flex-direction: column; gap: 1px; }

/* Card — close to hiox service card style */
.ac {
  background: var(--wh);
  border-bottom: 1px solid var(--bd2);
  padding: 1rem 1.1rem;
  display: flex; gap: 1rem; align-items: flex-start;
  text-decoration: none; color: inherit;
  transition: background var(--tr);
}
.ac:first-child { border-top: 1px solid var(--bd2); }
.ac:hover {
  background: var(--bg2);
  text-decoration: none; color: inherit;
}
.ac-body { flex: 1; min-width: 0; text-align:left;}
.ac-thumb {
  width: 86px; height: 62px; flex-shrink: 0;
  object-fit: cover; border-radius: var(--r);
  border: 1px solid var(--bd);
}

/* Pill badges — hiox hero-content h5 style: border 0.5px solid, padding 6px 32px */
.am { display: flex; align-items: center; flex-wrap: wrap; gap: .38rem; margin-bottom: .38rem; }

.pc {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r);
  background: var(--green-l2); color: var(--green);
  border: 1px solid var(--green-b);
}
.ps {
  font-size: 12px; color: var(--tm);
  background: var(--bg); border: 1px solid var(--bd2);
  border-radius: var(--r); padding: 2px 8px;
}
.at { font-size: 12px; color: var(--tm); margin-left: auto; white-space: nowrap; }

/* hiox h4 style: font-size:24px color:#333 font-weight:600 */
.ac h2 {
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600; color: var(--th2);
  line-height: 1.35; margin-bottom: .25rem;
}
.ae { font-size: 14px; color: var(--t); line-height: 1.6; }

/* hiox .section-title h5::before dot */
.ut {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-top: .38rem; font-size: 12px; font-weight: 600;
  color: var(--orange);
}
.ut::before {
  content: ''; display: block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--orange);
}

/* ── Announcement detail ─────────────────────────────────────── */
.dc {
  background: var(--wh);
  border: 1px solid var(--bd2);
  border-radius: var(--rl);
  box-shadow: var(--xs);
  overflow: hidden;
}
/* Hero header — hiox hero gradient */
.dh {
  padding: 1.35rem 1.65rem 1.1rem;
  background: linear-gradient(135deg, #F0FAF3 0%, #F1FFF6 60%, #fff 100%);
  border-bottom: 1px solid var(--bd2);
}
.dh h1 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600; color: var(--th); /* #525252 */
  line-height: 1.25; margin: .5rem 0 .4rem;
}
.dt {
  display: flex; flex-wrap: wrap; gap: .45rem 1.1rem;
  font-size: 13px; color: var(--tm); margin-top: .45rem;
}
.dt span { display: flex; align-items: center; gap: .25rem; }
.db { padding: 1.5rem 1.65rem; }
.db img { margin: 1rem 0; border-radius: var(--r); border: 1px solid var(--bd); }

/* hiox .info-content p style */
.dc-txt { color: var(--t); line-height: 1.75; font-size: clamp(15px,2vw,16px);  text-align: left; }
.dc-txt h2, .dc-txt h3 { color: var(--th2); font-weight: 600; margin: 1rem 0 .35rem; }
.dc-txt ul, .dc-txt ol { padding-left: 1.5rem; margin: .5rem 0 .75rem; list-style: disc; }
.dc-txt li { margin-bottom: .28rem; color: var(--t);}
.dc-txt p { margin-bottom: .65rem; font-size: clamp(13px, 2vw, 16px); }
.dc-txt strong { color: var(--th2); font-weight: 600; }

.pdf-btn {
  display: inline-flex; align-items: center; gap: .38rem;
  background: var(--orange-l); border: 1px solid var(--orange-b);
  border-radius: var(--r); padding: 8px 14px;
  font-size: 14px; font-weight: 600; color: var(--orange);
  margin-bottom: 1.1rem; transition: var(--tr);
}
.pdf-btn:hover { background: var(--orange-b); text-decoration: none; }

/* Updates thread */
.us {
  padding: 1.1rem 1.65rem 1.35rem;
  border-top: 1px solid var(--bd2);
  background: var(--bg);
  text-align: left;
}
.us h3 {
  font-size: 15px; font-weight: 600; color: var(--th2);
  margin-bottom: .9rem;
  display: flex; align-items: center; gap: .35rem;
}
.ui  { display: flex; gap: .7rem; margin-bottom: .7rem; }
.usp { display: flex; flex-direction: column; align-items: center; }
.ud  { width: 8px; height: 8px; border-radius: 50%; background: var(--green2); flex-shrink: 0; margin-top: 4px; }
.ul2 { width: 1px; flex: 1; background: var(--green-b); margin: 3px auto 0; }
.ub  {
  flex: 1; background: var(--wh);
  border: 1px solid var(--bd2); border-radius: var(--r); padding: .65rem .85rem;
}
.ub p    { font-size: 14px; color: var(--t); margin-bottom: .15rem; line-height: 1.6; }
.ub time { font-size: 12px; color: var(--tm); }

/* ── Case Study grid ─────────────────────────────────────────── */
.csg { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: 1rem; }
.csc {
  background: var(--wh);
  border: 1px solid var(--bd2);
  border-radius: var(--rl);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  box-shadow: var(--xs);
  transition: box-shadow var(--tr), transform var(--tr), border-color var(--tr);
}
.csc:hover {
  box-shadow: var(--sm); transform: translateY(-2px);
  border-color: var(--green-b); text-decoration: none; color: inherit;
}
.csc-img { width: 100%; height: 155px; object-fit: cover; }
.csc-ph  {
  height: 155px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F0FAF3, #fff4eb); font-size: 2.5rem;
}
.csc-body { padding: 1rem 1.1rem; flex: 1; display: flex; flex-direction: column; text-align: left;}
/* hiox .hero-content h5 — uppercase label */
.csi {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange); margin-bottom: .28rem;
}
.csc-body h2 { font-size: 15px; font-weight: 600; color: var(--th2); margin-bottom: .18rem; line-height: 1.35; }
.csc-cli     { font-size: 13px; color: var(--tm); margin-bottom: .45rem; }
.csc-res     { font-size: 14px; color: var(--t); line-height: 1.55; flex: 1; }
.csc-chips   { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .65rem; }
.chip {
  font-size: 11px; font-weight: 600;
  background: var(--green-l2); color: var(--green);
  border: 1px solid var(--green-b); border-radius: var(--r); padding: 2px 8px;
}

/* ── Case Study detail ───────────────────────────────────────── */
.csd-card {
  background: var(--wh); border: 1px solid var(--bd2);
  border-radius: var(--rl); box-shadow: var(--xs); overflow: hidden;
  margin-bottom: 1rem;
  text-align: left;
}
.csd-hdr {
  padding: 1.35rem 1.65rem 1.1rem;
  background: linear-gradient(135deg, #F0FAF3 0%, #F1FFF6 60%, #fff 100%);
  border-bottom: 1px solid var(--bd2);
}
.csd-hdr h1 { font-size: clamp(20px,3vw,28px); font-weight: 600; color: var(--th); margin: .4rem 0 .35rem; }
.csd-meta   { display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: 13px; color: var(--tm); margin-top: .4rem; }
.csd-meta span { display: flex; align-items: center; gap: .22rem; }

/* Metrics strip */
.ms { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: .65rem; margin-bottom: 1rem; }
.mt {
  background: var(--wh); border: 1px solid var(--bd2);
  border-radius: var(--rl); padding: 1rem .8rem;
  text-align: center; box-shadow: var(--xs);
}
.mt-ic { font-size: 1.25rem; margin-bottom: .22rem; }
/* hiox .section-title h2 colour */
.mt-v  { font-size: 1.45rem; font-weight: 700; color: var(--green); line-height: 1; }
.mt-l  { font-size: 12px; color: var(--tm); margin-top: .15rem; line-height: 1.3; }

.cst {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tm); display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem;
}
.cst::after { content: ''; flex: 1; height: 1px; background: var(--bd2); }

/* Testimonial — hiox info-icon style */
.tb {
  background: var(--green-l2);
  border: 1px solid var(--green-b);
  border-left: 4px solid var(--green);
  border-radius: var(--rl); padding: 1.1rem 1.35rem; margin-bottom: 1rem;
}
.tb blockquote { font-size: 15px; color: var(--t); font-style: italic; line-height: 1.75; }
.tb cite       { display: block; margin-top: .55rem; font-size: 13px; font-weight: 600; color: var(--tm); font-style: normal; }

.svcs { display: flex; flex-wrap: wrap; gap: .28rem; }
.svc  {
  font-size: 13px; font-weight: 600;
  background: var(--orange-l); border: 1px solid var(--orange-b);
  color: var(--orange-d); border-radius: var(--r); padding: 3px 10px;
}

/* ── Status badges ───────────────────────────────────────────── */
.badge { display: inline-block; padding: 3px 8px; border-radius: var(--r); font-size: 11px; font-weight: 600; }
.bp { background: var(--s-ok-bg); color: var(--s-ok-fg); }
.bd2{ background: var(--s-dr-bg); color: var(--s-dr-fg); }
.ba { background: var(--s-ar-bg); color: var(--s-ar-fg); }

/* ── Buttons — hiox exact styles ────────────────────────────── */
/* Primary: green bg white text — hiox .section-button a */
.btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 10px 25px; border-radius: var(--r);
  font-size: 16px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap; text-decoration: none;
  transition: var(--tr); font-family: var(--f);
}
.btn:hover { text-decoration: none; }
/* hiox .section-button a — green */
.btn-g  { background: var(--green); color: #fff; border-color: var(--green); }
.btn-g:hover { background: var(--green-d); border-color: var(--green-d); color: #fff; }
/* hiox proceed_btn / buynow_btn — yellow gold */
.btn-gold { background: var(--gold); color: #111111; border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-d); border-color: var(--gold-d); color: #111; }
/* Orange */
.btn-o  { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-o:hover { background: var(--orange-d); color: #fff; }
/* Outline — hiox .sign_in style */
.btn-out {
  background: var(--wh); color: var(--t);
  border-color: var(--bd);
}
.btn-out:hover { border-color: var(--green); color: var(--green); background: var(--green-l2); }
/* Danger */
.btn-del { background: var(--s-er-bg); color: var(--s-er-fg); border-color: #f5c2c7; }
.btn-del:hover { background: #f9d0cc; }
/* Small */
.btn-s { padding: 5px 14px; font-size: 14px; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
  padding: 10px 14px; border-radius: var(--r);
  font-size: 14px; font-weight: 500; margin-bottom: .85rem;
}
.a-ok  { background: var(--s-ok-bg); border: 1px solid #a3cfbb; color: var(--s-ok-fg); }
.a-err { background: var(--s-er-bg); border: 1px solid #f1aeb5; color: var(--s-er-fg); }

/* ── Forms — hiox .config_form_input style ───────────────────── */
.fb {
  background: var(--wh); border: 1px solid var(--bd2);
  border-radius: var(--rl); padding: 1.4rem; box-shadow: var(--xs);
}
.fg  { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.fgr { display: flex; flex-direction: column; gap: .25rem; }
.fgr.full { grid-column: 1/-1; }

/* hiox label{ color:#484848 !important } */
.shell label { font-size: 13px; font-weight: 600; color: var(--t) !important; display: block; }

/* hiox .config_form_input: border:1px solid #ccc border-radius:5px font-size:16px */
.shell input[type=text], .shell input[type=datetime-local], .shell select, .shell textarea {
  width: 100%;
  background: var(--wh);
  border: 1px solid #ccc;
  border-radius: var(--r);
  color: var(--t); font-family: var(--f);
  font-size: 15px; font-weight: 400;
  padding: 10px 12px; outline: none;
  transition: var(--tr);
}
/* hiox: select:focus { outline-color:#ed7122; border:1px solid #ed7122 } */
.shell input:focus, .shell select:focus, .shell textarea:focus {
  outline: none;
  border: 1px solid var(--orange) !important;
  box-shadow: none;
}
.shell input[type=file] {
  background: var(--bg); border: 1px dashed var(--bd);
  border-radius: var(--r); padding: 8px 10px;
  font-size: 13px; color: var(--tm); cursor: pointer; width: 100%;
}
.shell input[type=file]:hover { border-color: var(--green); }
.shell textarea { resize: vertical; min-height: 140px; line-height: 1.65; }
/* hiox form input::placeholder */
.shell input::placeholder, .shell textarea::placeholder {
  font-size: 14px; color: #a5a5a5; font-weight: 400;
}

.hint { font-size: 12px; color: var(--tm); font-weight: 400; }
.fa   { display: flex; gap: .5rem; margin-top: 1.1rem; flex-wrap: wrap; }
.fsep {
  grid-column: 1/-1; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tm);
  border-top: 1px solid var(--bd2); padding-top: .75rem; margin-top: .2rem;
}

/* ── Table — hiox clean table style ─────────────────────────── */
.tbl {
  width: 100%; border-collapse: collapse;
  background: var(--wh); border: 1px solid var(--bd2);
  border-radius: var(--rl); overflow: hidden;
  font-size: 14px; box-shadow: var(--xs);
}
.tbl th {
  background: var(--bg);
  padding: 10px 12px; text-align: left;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tm); border-bottom: 1px solid var(--bd2);
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid #f1f3f6; vertical-align: middle; color: var(--t); }
.tbl tr:last-child td { border-bottom: none; }
/* hiox tr.high { background:whitesmoke } */
.tbl tr:hover td { background: #f8f9fa; }

/* ── Pagination ──────────────────────────────────────────────── */
.pag { display: flex; flex-wrap: wrap; gap: .28rem; justify-content: center; padding: 1.25rem 0 .3rem; }
.pag a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r); background: var(--wh); border: 1px solid var(--bd2);
  font-size: 14px; font-weight: 500; color: var(--t); text-decoration: none;
  transition: var(--tr);
}
.pag a:hover { border-color: var(--green); color: var(--green); }
.pag a.on { background: var(--green); border-color: var(--green); color: #fff; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty { text-align: center; padding: 3.5rem 1rem; color: var(--tm); }
.empty .ei { font-size: 2.5rem; margin-bottom: .6rem; }
.empty h3  { font-size: 18px; color: var(--th2); font-weight: 600; margin-bottom: .28rem; }
.empty p   { font-size: 14px; }

/* ── Admin layout ────────────────────────────────────────────── */
.anl {
  display: flex; align-items: center; gap: .42rem;
  padding: 8px 14px; font-size: 14px; font-weight: 500;
  color: var(--t); border-left: 3px solid transparent;
  text-decoration: none; transition: var(--tr);
}
.anl:hover { background: var(--bg); color: var(--th2); text-decoration: none; }
.anl.on { background: var(--green-l2); color: var(--green); border-left-color: var(--green); font-weight: 600; }
.anl-sec {
  font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tm); padding: .85rem .85rem .28rem;
}
.admin-wrap { display: flex; min-height: calc(100vh - var(--hh)); }
.admin-sb   {
  width: 205px; flex-shrink: 0; background: var(--wh);
  border-right: 1px solid var(--bd2); padding: .8rem 0;
}
.admin-main { flex: 1; min-width: 0; padding: 1.5rem 2rem 3rem; background: var(--bg); }
.adm-tb     {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.1rem; gap: 1rem; flex-wrap: wrap;
}
/* hiox h3 style for admin heading */
.adm-tb h1  { font-size: clamp(18px,2vw,22px); font-weight: 600; color: var(--th2); }

/* ── Footer — hiox copyright bar ────────────────────────────── */
.ftr {
  background: var(--bg); border-top: 1px solid var(--bd2);
  padding: 14px 1.5rem; font-size: 14px; color: var(--tm);
  display: flex; align-items: center; justify-content: space-between;
}
.ftr a { color: var(--tm); font-weight: 500; }
.ftr a:hover { color: var(--green); }

/* ── HR — hiox hr style (subtle) ─────────────────────────────── */
hr { border: none; border-top: 1px solid var(--bd2); margin: 1.5rem 0; opacity: 1; }

/* ── Scrollbar — subtle ──────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }

/* ── Sidebar overlay (mobile) ────────────────────────────────── */
.sb-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 800;
}
.sb-overlay.open { display: block; }

/* ── Responsive breakpoints ──────────────────────────────────── */
@media (max-width: 860px) {
  /* Show Categories button in tool-bar */
  .tool-bar { display: flex; }
  .sb-toggle  { display: inline-flex; }

  /* Sidebar: slide in from left as drawer */
  .sb {
    position: fixed;
    left: -100%; top: var(--hh);
    width: 270px; height: calc(100vh - var(--hh));
    z-index: 810;
    transition: left .25s ease;
    box-shadow: none;
  }
  .sb.open {
    left: 0;
    box-shadow: 4px 0 18px rgba(0,0,0,.15);
  }

  .main { padding: 1rem; }
  .page-hero { margin: -1rem -1rem 1rem; padding: 1.1rem 1rem; }
}

@media (max-width: 600px) {
  .fg        { grid-template-columns: 1fr; }
  .ac-thumb  { display: none; }
  .csg       { grid-template-columns: 1fr; }
  .ms        { grid-template-columns: repeat(2,1fr); }
  .pag a     { width: 30px; height: 30px; font-size: 13px; }
  .adm-tb    { flex-direction: column; align-items: flex-start; }
}