/* YHO Portal — QuickBooks-style theme (drop-in variant of style.css).
   Same layout, same selectors, same class names as the navy theme;
   only visual values differ: charcoal sidebar, QuickBooks green
   (#2ca01c) primary actions and highlights, airy white content. */
:root {
  --navy: #393a3d;
  --navy-deep: #2b2c2f;
  --navy-mid: #434447;
  --navy-ink: #393a3d;
  --accent: #2ca01c;
  --accent-strong: #2ca01c;
  --accent-dark: #1e7d13;
  --nav-active: #4d4e52;
  --nav-accent: #2ca01c;
  --bg: #f7f8fa;
  --card: #ffffff;
  --border: #d4d7dc;
  --border-soft: #e3e5e8;
  --ink: #393a3d;
  --muted: #6b6c72;
  --radius: 8px;
  --shadow: 0 1px 4px rgba(0, 0, 0, .08);
  --sidebar-w: 230px;
}
* { box-sizing: border-box; }
body { font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;
       margin: 0; background: var(--bg); color: var(--ink); }

/* ---------------------------------------------------------- layout */
.layout { min-height: 100vh; }
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w);
           background: linear-gradient(180deg, var(--navy-mid) 0%, var(--navy) 42%, var(--navy-deep) 100%);
           color: #ececed; display: flex; flex-direction: column; z-index: 60;
           box-shadow: 2px 0 14px rgba(0, 0, 0, .28); }
.side-brand { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.brand-name { font-size: 27px; font-weight: 800; letter-spacing: 3px; line-height: 1; color: #fff; }
.brand-sub { margin-top: 7px; font-size: 11.5px; letter-spacing: .08em;
             text-transform: uppercase; color: #b9babc; }
.sidenav { flex: 1 1 auto; overflow-y: auto; padding: 6px 0 14px; }
.nav-caption { padding: 17px 24px 6px; font-size: 11px; font-weight: 700;
               letter-spacing: .13em; text-transform: uppercase; color: #9d9ea1; }
.nav-group:first-child .nav-caption { padding-top: 9px; }
.sidenav a { display: flex; align-items: center; justify-content: space-between;
             gap: 8px; margin: 2px 10px; padding: 9px 14px; border-radius: 8px;
             color: #d7d8da; text-decoration: none; font-size: 14px; font-weight: 500; }
.sidenav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.sidenav a.active { background: var(--nav-active); color: #fff; font-weight: 600;
                    box-shadow: inset 3px 0 0 var(--nav-accent); }
.side-foot { border-top: 1px solid rgba(255, 255, 255, .12); padding: 12px 20px 16px;
             display: flex; flex-direction: column; gap: 7px;
             font-size: 13px; color: #d7d8da; }
.side-user { color: #b9babc; }
.side-logout { color: #ececed; font-weight: 600; text-decoration: none; }
.side-logout:hover { color: #fff; text-decoration: underline; }
.content { margin-left: var(--sidebar-w); min-width: 0; }
main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
body.app main { max-width: none; padding: 24px 20px 64px; }

/* ---------------------------------------------------------- type */
h1 { font-size: 24px; margin: 8px 0 16px; color: var(--navy); letter-spacing: -.01em; }
h2 { font-size: 18px; margin: 22px 0 10px; color: var(--navy-ink); }
a { color: var(--accent-strong); }
a:focus-visible, .btn:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(44, 160, 28, .5); outline-offset: 1px; }

/* ---------------------------------------------------------- tables */
table { border-collapse: collapse; width: 100%; background: #fff;
        box-shadow: var(--shadow); }
th, td { border: 1px solid var(--border); padding: 7px 9px; font-size: 14px;
         text-align: left; vertical-align: top; }
th { background: #f4f5f8; color: var(--muted); font-weight: 600;
     border-bottom: 1px solid #d4d7dc; position: sticky; top: 0; z-index: 2; }
tbody tr:nth-child(even) td, table > tr:nth-child(even) td { background: #fbfbfc; }
tbody tr:hover td, table > tr:hover td { background: #f4f9f3; }

/* ---------------------------------------------------------- cards & stats */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 18px; margin-bottom: 18px; }
.stat { background: #fff; border: 1px solid var(--border); border-radius: 12px;
        box-shadow: var(--shadow); padding: 16px;
        container-type: inline-size; overflow: hidden; }
.stat .n { font-size: clamp(15px, 11cqw, 26px); font-weight: 700; white-space: nowrap; letter-spacing: -0.4px; }
.stat .l { font-size: 13px; color: var(--muted); }
.stat.hero .n { font-size: clamp(22px, 16cqw, 38px); color: var(--accent-strong); }
a.stat { display: block; text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--accent); background: #f8fcf7;
               box-shadow: 0 4px 14px rgba(0, 0, 0, .10); }
.stat.company .cname { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.stat.company .cname a { color: inherit; text-decoration: none; }
.stat.company .cname a:hover { color: var(--accent-strong); text-decoration: underline; }
.kv { display: flex; justify-content: space-between; gap: 10px;
      padding: 3px 0; border-top: 1px solid var(--border-soft); font-size: 13.5px; }
.kv span { color: var(--muted); }
.kv b { font-weight: 600; }
.kv b a { color: inherit; text-decoration: none; }
.kv b a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---------------------------------------------------------- badges & misc */
.badge { display: inline-block; background: #c0392b; color: #fff;
         border-radius: 999px; padding: 0 7px; font-size: 11.5px;
         font-weight: 700; line-height: 18px; vertical-align: 2px; }
.badge.green { background: #1e7d46; }
.badge.gray { background: #66788a; }
.notiflist { margin: 0; padding-left: 18px; }
.notiflist li { margin: 6px 0; font-size: 14px; }
.muted { color: var(--muted); font-size: 13px; }
.right { text-align: right; }
.warn-text { color: #92400e; font-weight: 600; font-size: 12.5px; }
.locked { background: #f4f5f8; border: 1px dashed #b9babc; border-radius: 8px;
          padding: 12px 16px; }
.downloads { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.langswitch { white-space: nowrap; font-size: 14px; }
.langswitch a { color: inherit; text-decoration: none; opacity: .65; }
.langswitch a.active { font-weight: 700; opacity: 1; text-decoration: underline; }

/* ---------------------------------------------------------- tabs (company page) */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px;
        padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.tabs .btn.small { border-radius: 999px; padding: 7px 16px;
                   box-shadow: inset 0 0 0 1px var(--accent-strong); }
.tabs .btn.small.gray { background: #f0f1f3; color: #4d4e52;
                        box-shadow: inset 0 0 0 1px var(--border); }
.tabs .btn.small.gray:hover { background: #e4e6e9; color: var(--navy-ink); }

/* ---------------------------------------------------------- forms & buttons */
label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
input, select, textarea { width: 100%; padding: 9px 10px; border: 1px solid #babec5;
        border-radius: 6px; font-size: 14px; background: #fff; color: var(--ink);
        font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(44, 160, 28, .16); outline: none; }
input[type=checkbox] { width: auto; }
textarea { min-height: 60px; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 4px 18px; }
.hoursgrid input { width: 62px; padding: 5px; }
.btn { display: inline-block; background: var(--accent-strong); color: #fff; border: 0;
       padding: 9px 18px; border-radius: 20px; font-size: 14px; font-weight: 600;
       cursor: pointer; text-decoration: none;
       box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.btn:hover { background: var(--accent-dark); }
.btn.gray { background: #ffffff; color: #393a3d;
            box-shadow: inset 0 0 0 1px #b9babc; }
.btn.gray:hover { background: #f0f1f3; }
.btn.red { background: #d52b1e; } .btn.red:hover { background: #b02217; }
.btn.green { background: #2ca01c; } .btn.green:hover { background: #1e7d13; }
.btn.big { font-size: 17px; padding: 14px 22px; font-weight: 700; border-radius: 24px; }
.btn.small { padding: 5px 10px; font-size: 13px; }

/* ---------------------------------------------------------- flashes */
.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.flash.ok { background: #e2f4e6; border: 1px solid #8fce9f; }
.flash.error { background: #fbe7e4; border: 1px solid #e5a49c; }
.flash.warn { background: #fdf3d8; border: 1px solid #e3c878; }

/* ---------------------------------------------------------- login */
body.login-page { background: linear-gradient(135deg, #2b2c2f 0%, #393a3d 55%, #4d4e52 100%);
                  min-height: 100vh; display: flex; align-items: center;
                  justify-content: center; }
body.login-page main.login-main { max-width: 420px; width: 100%; margin: 0;
                  padding: 24px 16px; }
body.login-page .card { border: none; border-radius: 14px; padding: 28px 30px 30px;
                  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
body.login-page .card::before { content: "YHO"; display: block; text-align: center;
                  font-size: 15px; font-weight: 800; letter-spacing: 4px;
                  color: var(--accent-strong); margin-bottom: 2px; }
body.login-page h1 { text-align: center; font-size: 25px; margin: 4px 0 18px; }
body.login-page .langswitch { color: var(--muted); }

/* ---------------------------------------------------------- mobile */
@media (max-width: 860px) {
  .sidebar { position: static; width: auto; box-shadow: none; }
  .content { margin-left: 0; }
  .side-brand { display: flex; align-items: baseline; gap: 12px;
                padding: 12px 16px 10px; }
  .brand-name { font-size: 22px; }
  .brand-sub { margin-top: 0; }
  .sidenav { display: flex; overflow-x: auto; overflow-y: hidden;
             padding: 6px 8px; gap: 2px; -webkit-overflow-scrolling: touch; }
  .nav-group { display: flex; align-items: center; gap: 2px; }
  .nav-group + .nav-group { border-left: 1px solid rgba(255, 255, 255, .16);
             margin-left: 6px; padding-left: 6px; }
  .nav-caption { display: none; }
  .sidenav a { white-space: nowrap; margin: 0; padding: 8px 11px; }
  .side-foot { flex-direction: row; flex-wrap: wrap; align-items: center;
               gap: 6px 14px; padding: 9px 16px 12px; }
  body.app main { padding: 18px 14px 48px; }
  h1 { font-size: 21px; }
}

/* ---------------------------------------------------------- charts */
/* Server-rendered inline SVG (reports). Fill colors are per-theme;
   the markup only carries .bar-a/.bar-b/.bar-c classes. */
.chart { margin: 4px 0 10px; }
.chart svg { max-width: 100%; height: auto; display: block; }
.chart .bar-a { fill: #2ca01c; }
.chart .bar-b { fill: #393a3d; }
.chart .bar-c { fill: #0077c5; }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart text { fill: var(--ink); font-size: 12px; font-family: inherit; }
.chart .val { font-weight: 700; }
.chart-legend { display: flex; gap: 18px; flex-wrap: wrap;
                margin: 2px 0 6px; font-size: 13px; color: var(--muted); }
.chart-legend .sw { display: inline-block; width: 12px; height: 12px;
                    border-radius: 3px; margin-right: 6px;
                    vertical-align: -1px; }
.chart-legend .bar-a { background: #2ca01c; }
.chart-legend .bar-b { background: #393a3d; }
.chart-legend .bar-c { background: #0077c5; }
.chart .grid { stroke: var(--border-soft); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; }
.chart .seg-a { fill: #7ac74f; }
.chart .seg-b { fill: #2ca01c; }
.chart .seg-c { fill: #f2a900; }
.chart .seg-d { fill: #d52b1e; }
.chart .seg-val { fill: #fff; font-size: 11.5px; font-weight: 700; }
.chart-legend .seg-a { background: #7ac74f; }
.chart-legend .seg-b { background: #2ca01c; }
.chart-legend .seg-c { background: #f2a900; }
.chart-legend .seg-d { background: #d52b1e; }
.chart-legend .chip { display: inline-flex; align-items: center;
                      background: var(--card); border: 1px solid var(--border);
                      border-radius: 999px; padding: 3px 11px 3px 8px;
                      color: var(--ink); font-weight: 600; }
.chart-sub { font-size: 14.5px; margin: 14px 0 4px; color: var(--navy-ink); }

/* -------------------------------------------------- report pages */
/* QBO printed-report chrome: a centered formal header, KPI cards
   and table styling scoped to the reports section only. */
.report-head { text-align: center; border-bottom: 2px solid var(--navy);
               padding: 4px 0 14px; margin-bottom: 18px; }
.report-head .rh-brand { font-size: 12px; font-weight: 800;
               letter-spacing: 3px; text-transform: uppercase;
               color: var(--muted); }
.report-head h1 { font-size: 25px; margin: 5px 0 3px; }
.report-head .rh-period { font-size: 14.5px; font-weight: 600;
               color: var(--navy-ink); }
.report-head .rh-meta { font-size: 12.5px; color: var(--muted);
               margin-top: 3px; }
.kpi-row { margin-bottom: 18px; }
.report-table th { border-bottom: 2px solid var(--navy); }
.report-table tbody tr:nth-child(even) td { background: #fbfbfc; }
.report-table tbody tr:hover td { background: #f4f9f3; }
.report-table tbody tr.co-row td { background: #f2f8f1; }
.report-table tbody tr.total-row td { background: #e6f3e3;
               border-top: 2px solid var(--navy); }
.report-table .site-row td { font-size: 13.5px; }
.report-table .site-row td:first-child { padding-left: 26px;
               color: var(--muted); }

/* ---------------------------------------------------------- print */
@media print { .sidebar, .noprint { display: none; }
               .content { margin-left: 0; }
               body.app main { max-width: none; padding: 0; }
               body { background: #fff; }
               .card, .stat, table { box-shadow: none; }
               .report-head { padding-top: 0; }
               .chart, .kpi-row { break-inside: avoid; } }

/* Password show/hide toggle (settings page) */
.pw-wrap { display: flex; gap: 6px; align-items: center; }
.pw-wrap input { flex: 1; min-width: 0; }
.pw-eye { flex: none; padding: 4px 10px; font-size: 12px; line-height: 1.4;
  background: #eef1f4; color: #333; border: 1px solid #c9d1d9; border-radius: 6px;
  cursor: pointer; }
.pw-eye:hover { background: #e2e8ee; }