/* ===== HMIS of Summit County — Modern reskin (FTS) =====
   Tampilan modern & responsif DI ATAS struktur FrontPage lama.
   Konten/teks/dokumen legacy TIDAK diubah. Font sistem (tanpa outbound). */

/* Layer responsif (mobile <768px) — file terpisah, dimuat di sini agar semua
   halaman yang me-link fts-modern.css otomatis ikut responsif tanpa ubah HTML. */
@import url("fts-responsive.css");

:root{
  --blue:#22366e; --blue2:#2f4a97; --blue-soft:#eef2fb;
  --gold:#d9a400; --gold-ink:#7a5c00;
  --maroon:#8a1c1c; --ink:#28303f; --muted:#5b6478;
  --bg:#e9edf4; --card:#ffffff; --line:#e0e5ef; --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg)!important; margin:0!important; padding:18px 12px!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  color:var(--ink)!important; font-size:16px!important; line-height:1.65!important;
  background-image:none!important;
}
/* netralkan ukuran/format <font> kuno, warna dibiarkan utk identitas */
font{font-family:inherit!important; font-size:inherit!important}
img{max-width:100%!important; height:auto!important; border:0!important}
a{color:var(--blue2); text-decoration:none}
a:hover{text-decoration:underline; font-style:normal!important}
hr{border:0!important; border-top:2px solid var(--line)!important; margin:18px 0!important; height:0!important; color:transparent!important}
p{margin:0 0 12px}

/* ---- bungkus semua tabel kuno jadi lebar responsif & terpusat ---- */
.mainTable,#table1,#table2{
  width:100%!important; max-width:1120px!important; margin-left:auto!important; margin-right:auto!important;
  border:0!important; border-collapse:separate!important; border-spacing:0!important; background:transparent!important;
}

/* ================= HEADER BANNER (#table1) ================= */
#table1{margin:0 auto!important; box-shadow:0 10px 30px rgba(18,28,58,.16); border-radius:var(--radius) var(--radius) 0 0; overflow:hidden}
#table1 td{border:0!important; padding:0!important; vertical-align:middle!important; background:var(--blue)!important}
#table1 td[bgcolor]{background:linear-gradient(135deg,var(--blue),var(--blue2))!important}
#table1 img{display:block!important; width:100%!important; height:110px!important; object-fit:cover!important}
#table1 font,#table1 strong{color:#fff!important; font-weight:800!important; font-size:1.02rem!important; line-height:1.3; letter-spacing:.2px}
#table1 td[align="center"]{padding:8px 12px!important; text-align:center!important}

/* ================= BODY LAYOUT (#table2) ================= */
#table2{margin:0 auto 16px!important; box-shadow:0 10px 30px rgba(18,28,58,.12); border-radius:0 0 var(--radius) var(--radius); overflow:hidden; background:var(--card)!important}
#table2>tbody>tr>td{vertical-align:top!important; border:0!important}

/* sidebar biru (kiri & kanan) */
#table2 td[bgcolor="#3C438A"]{background:linear-gradient(180deg,var(--blue),var(--blue2))!important; color:#fff!important; padding:20px 16px!important}
#table2 td[bgcolor="#3C438A"] font,#table2 td[bgcolor="#3C438A"] span,#table2 td[bgcolor="#3C438A"] b{color:#fff!important}

/* nav kiri: HOME/RESOURCES/... jadi tombol */
#table2 td[bgcolor="#3C438A"]:first-child p[align="center"]{margin:0 0 8px!important}
#table2 td[bgcolor="#3C438A"]:first-child a{
  display:block; color:#fff!important; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); border-radius:9px; padding:9px 12px; margin:0 0 8px;
  font-weight:700; text-align:center; transition:background .15s;
}
#table2 td[bgcolor="#3C438A"]:first-child a:hover{background:rgba(255,255,255,.20); text-decoration:none}
#table2 td[bgcolor="#3C438A"]:first-child a font{color:#fff!important; font-weight:700!important}

/* kotak "HMIS User Notes" (gold) */
#table2 td[bgcolor="#3C438A"]:first-child div[style*="E7C747"]{
  background:var(--gold)!important; color:#3a2c00!important; border:0!important; border-radius:9px!important;
  padding:8px 10px!important; margin:16px 0 8px!important; text-align:center; font-weight:800;
}
#table2 td[bgcolor="#3C438A"]:first-child div[style*="E7C747"] font{color:#3a2c00!important; font-weight:800!important}
#SideBarGold p{margin:0 0 4px!important}
#SideBarGold a{background:transparent!important; border:0!important; border-radius:0!important; padding:2px 0!important;
  display:inline; color:#ffe08a!important; text-align:left; font-weight:600}
#SideBarGold a:hover{color:#fff!important; text-decoration:underline}
#SideBarGold u{text-decoration:none!important}

/* konten utama (putih) */
#table2 td[bgcolor="#FFFFFF"]{background:var(--card)!important; padding:30px 34px!important; color:var(--ink)!important; border:0!important}
#table2 td[bgcolor="#FFFFFF"] font{color:var(--ink)!important}
/* judul-judul maroon */
#table2 td[bgcolor="#FFFFFF"] font[color="#800000"]{
  color:var(--maroon)!important; font-weight:800!important; font-size:1.5rem!important;
  display:block; margin:26px 0 10px; line-height:1.25;
}
/* judul situs paling atas */
.style1 font[color="#800000"],.style3{font-size:1.9rem!important}
/* teks tautan biru identitas tetap terbaca */
#table2 td[bgcolor="#FFFFFF"] font[color="#3C438A"]{color:#33406e!important}
#table2 td[bgcolor="#FFFFFF"] ul{margin:6px 0 14px; padding-left:22px}
#table2 td[bgcolor="#FFFFFF"] li{margin:6px 0}
#table2 td[bgcolor="#FFFFFF"] dl,#table2 td[bgcolor="#FFFFFF"] dt{margin:0}


/* tautan yang tadinya outbound -> teks biasa (dinetralkan skrip) */
.fts-exlink{color:var(--muted)!important; text-decoration:none!important; font-weight:600}

/* daftar mitra */
#smallBlue{font-size:.98rem}
#smallBlue div{margin:2px 0}

/* sidebar kanan: vision + seals */
#table2 td[bgcolor="#3C438A"]:last-child{padding:22px 16px!important; text-align:center!important}
.style7{display:block; font-style:italic; color:#eaf0ff!important; font-size:1rem!important; line-height:1.6}
.style8{display:block; margin-top:8px; color:var(--gold)!important; font-weight:700!important}
#table2 td[bgcolor="#3C438A"]:last-child img{
  background:#fff; border-radius:12px; padding:8px; margin:10px auto!important; display:block;
  width:74px!important; height:74px!important; object-fit:contain!important; box-shadow:0 3px 10px rgba(0,0,0,.18);
}

/* footer (baris colspan 3) */
#table2 td[colspan="3"]{
  background:var(--blue)!important; border:0!important; border-radius:0!important; padding:18px 20px!important; text-align:center;
}
#table2 td[colspan="3"] font,#table2 td[colspan="3"] strong{color:#dfe6ff!important; font-size:.92rem!important; font-weight:600!important}

/* ============ HALAMAN TANPA LAYOUT UTAMA (form SCRN, subsite CoC) ============ */
/* dibungkus .fts-wrap oleh skrip -> kartu putih terpusat */
.fts-wrap{
  max-width:940px; margin:22px auto; background:var(--card);
  border-radius:var(--radius); box-shadow:0 10px 30px rgba(18,28,58,.12);
  padding:30px 38px;
}
.fts-wrap img{max-width:100%; height:auto}
.fts-wrap hr{margin:18px 0}
/* nav teks di subsite CoC -> tautan rapi */
.fts-wrap a{color:var(--blue2)}
pre,tt,code,kbd,samp{font-family:inherit!important}

/* ---- kontrol form (SCRN Provider Information Form) ---- */
input[type=text],input[type=email],input[type=url],input[type=number],input[type=date],
input:not([type]),textarea,select{
  font:inherit!important; padding:8px 11px; border:1px solid #c7cfe0; border-radius:8px;
  background:#fff; color:var(--ink); max-width:100%; margin:2px 0;
}
input[type=text]:focus,textarea:focus,select:focus{outline:2px solid var(--blue2); border-color:var(--blue2)}
textarea{min-height:96px; width:100%; max-width:560px}
input[type=checkbox],input[type=radio]{width:17px; height:17px; vertical-align:-3px; margin-right:6px; accent-color:var(--blue2)}
label,input[type=submit],button{font:inherit}
input[type=submit],button[type=submit]{
  background:var(--blue2); color:#fff; border:0; border-radius:8px; padding:10px 18px;
  font-weight:700; cursor:pointer;
}
input[type=submit]:hover{background:var(--blue)}

/* ---- tabel DATA di halaman utama (mis. Advisory Committee) -> tabel modern ----
   (khusus konten putih #table2; TIDAK menyentuh tabel layout/header subsite CoC & form SCRN) */
#table2 td[bgcolor="#FFFFFF"] table[border="1"],
#table2 td[bgcolor="#FFFFFF"] table[cellspacing="0"]{
  border-collapse:collapse!important; width:100%!important; margin:10px 0 18px; background:#fff;
  border:1px solid var(--line)!important; border-radius:10px; overflow:hidden;
}
#table2 td[bgcolor="#FFFFFF"] table[border="1"] td,
#table2 td[bgcolor="#FFFFFF"] table[cellspacing="0"] td{
  border:1px solid #e6eaf2!important; padding:9px 12px!important; text-align:left; vertical-align:top;
}
/* baris pertama tabel data sbg header */
#table2 td[bgcolor="#FFFFFF"] table[border="1"] tr:first-child td{
  background:var(--blue-soft); font-weight:700; color:var(--blue)!important;
}
/* named-anchor di sel data JANGAN tampil seperti tombol */
#table2 td[bgcolor="#FFFFFF"] a[name]:not([href]){background:none!important;border:0!important;padding:0!important}

/* sel biru "yatim" di luar layout tabel (mis. minutes calendar.htm yg HTML-nya malformed)
   tetap terbaca: kotak biru dgn teks terang. (tanpa display:block agar sel dlm-tabel aman) */
td[bgcolor="#3C438A"]{background:var(--blue); color:#fff}
td[bgcolor="#3C438A"] a,td[bgcolor="#3C438A"] font{color:#ffe08a!important}
td[bgcolor="#3C438A"] font[color="#FFFFFF"]{color:#fff!important}
/* judul "View HMIS ... Minutes" yatim (Tahoma putih di latar terang) -> jadikan judul terbaca */
font[face="Tahoma"][color="#FFFFFF"]{color:var(--maroon)!important; font-weight:700; font-size:1.05rem}

/* ===================== RESPONSIVE ===================== */
@media (max-width:860px){
  body{padding:10px 6px!important}
  /* header: bungkus jadi grid gambar */
  #table1,#table1 tbody,#table1 tr{display:block!important}
  #table1 td{display:inline-block!important; width:48%!important; vertical-align:top}
  #table1 td[align="center"]{display:block!important; width:100%!important}
  #table1 img{height:auto!important; max-height:150px}
  /* body: linear-kan tabel rowspan jadi 1 kolom yg rapi */
  #table2,#table2>tbody{display:block!important; width:100%!important}
  #table2>tbody>tr{display:block!important; width:100%!important}
  #table2>tbody>tr>td{
    display:block!important; width:100%!important; float:none!important;
    position:static!important; clear:both!important; height:auto!important; overflow:hidden;
  }
  /* buang sel spacer biru kosong (baris 2 & 3) yg bikin tumpang tindih */
  #table2>tbody>tr:nth-child(2),#table2>tbody>tr:nth-child(3){display:none!important}
  #table2 td[bgcolor="#FFFFFF"]{padding:22px 18px!important}
  /* nav kiri: tombol blok penuh dalam blok biru */
  #table2 td[bgcolor="#3C438A"]:first-child{padding:16px 14px!important}
  #table2 td[bgcolor="#3C438A"]:first-child a{display:block!important; width:100%!important; margin:0 0 8px!important}
  #table2 td[bgcolor="#3C438A"]:last-child img{display:inline-block; margin:8px!important}
  #table2 td[colspan="3"]{display:block!important; width:100%!important}
}