/* Salary section -- shared by index.html (desktop) and ipad.html (iPad/phone).
   Self-contained: everything is prefixed sal- so it can't collide with
   style.css or style-ipad.css, and it defines its own colour variables
   (ipad.html doesn't load style.css). Layout adapts to the width of the
   Salary container itself (container query), not the window, so it fits
   with or without the desktop sidebar and never needs side-scrolling. */

.sal, .sal-ov {
  --sal-primary: #E84C3D;
  --sal-black: #1A1A1A;
  --sal-grey: #808080;
  --sal-off: #F5F5F5;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: var(--sal-black);
  font-size: 13px;
}
.sal * , .sal-ov * { box-sizing: border-box; }
.sal { container-type: inline-size; }
.sal h1 { font-weight: 500; font-size: 22px; margin: 0 0 4px; }
.sal-sub { color: var(--sal-grey); font-size: 12px; margin: 0 0 14px; }
.sal-sect { font-size: 15px; font-weight: 500; margin: 0 0 10px; }
.sal-hint { color: var(--sal-grey); font-size: 12px; margin: 10px 0 0; }
.sal-muted { color: var(--sal-grey); }

/* buttons */
.sal-btn, .sal-ov .sal-btn { border: none; border-radius: 6px; font-family: inherit; font-weight: 500; font-size: 13px; padding: 9px 16px; cursor: pointer; white-space: nowrap; }
.sal-btn--pri { background: var(--sal-primary); color: #fff; }
.sal-btn--pri:hover { background: #D6402F; }
.sal-btn--sec { background: var(--sal-off); color: var(--sal-black); border: 1px solid #DDD; }
.sal-btn--sec:hover { background: #ECECEC; }
.sal-btn--ghost { background: transparent; color: var(--sal-grey); border: 1px solid #DDD; }
.sal-btn--ghost:hover { color: var(--sal-black); border-color: var(--sal-black); }
.sal-btn--small { padding: 5px 12px; font-size: 12px; }
.sal-btn--text { background: none; border: none; color: var(--sal-grey); font-family: inherit; font-size: 12px; padding: 4px 6px; cursor: pointer; text-decoration: underline; }
.sal-btn--text:hover { color: var(--sal-black); }
.sal-btn[disabled] { opacity: .45; cursor: default; }

/* tabs */
.sal-tabs { display: flex; gap: 6px; margin: 12px 0 18px; flex-wrap: wrap; }
.sal-tab { border: 1px solid #DDD; background: #fff; border-radius: 6px; padding: 7px 14px; font-family: inherit; font-weight: 500; font-size: 13px; cursor: pointer; color: var(--sal-black); }
.sal-tab:hover { background: var(--sal-off); }
.sal-tab.is-active { background: #FCEBE9; color: var(--sal-primary); border-color: #F4C5BF; }

/* tiles */
.sal-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.sal-tile { background: var(--sal-off); border-radius: 8px; padding: 14px 18px; min-width: 0; }
.sal-tile__v { font-size: 22px; font-weight: 500; color: var(--sal-primary); line-height: 1.2; }
.sal-tile__v--sm { font-size: 16px; }
.sal-tile__l { font-size: 12px; color: var(--sal-grey); margin-top: 4px; }

.sal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sal-grow { flex: 1; }
.sal-month { display: flex; align-items: center; gap: 8px; }
.sal-month b { font-size: 16px; font-weight: 500; min-width: 130px; text-align: center; }

.sal-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sal-pill--pending { background: #FFF3E0; color: #B75E00; }
.sal-pill--done { background: #E7F5EA; color: #2E7D32; }
.sal-pill--draft { background: #E5E5E5; color: var(--sal-black); }
.sal-notice { background: #FFF3E0; color: #7a4a00; border-radius: 8px; padding: 11px 16px; margin-bottom: 14px; font-size: 12.5px; line-height: 1.5; }

/* tables -- fit the container, no side scroll */
.sal-tw { border: 1px solid #E5E5E5; border-radius: 8px; overflow: hidden; }
.sal-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sal-table th { text-align: left; font-weight: 500; color: var(--sal-grey); text-transform: uppercase; font-size: 11px; letter-spacing: .4px; padding: 9px 6px; border-bottom: 1px solid #E5E5E5; background: #fff; vertical-align: bottom; line-height: 1.25; }
.sal-table td { padding: 9px 6px; border-bottom: 1px solid #F0F0F0; vertical-align: middle; }
.sal-table th:first-child, .sal-table td:first-child { padding-left: 12px; }
.sal-table th:last-child, .sal-table td:last-child { padding-right: 12px; }
.sal-table .sal-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sal-table th.sal-num { white-space: normal; }
.sal-table td.sal-name { width: 17%; }
.sal-table td.sal-total { font-weight: 700; }
.sal-table tbody tr.sal-row { cursor: pointer; }
.sal-table tbody tr.sal-row:hover td { background: var(--sal-off); }
.sal-table tbody tr.is-paid td { background: #FAFDFB; }
.sal-table tbody tr.is-paid:hover td { background: var(--sal-off); }
.sal-table tfoot td { font-weight: 600; background: var(--sal-off); border-bottom: 0; }
.sal-table tr.sal-detail td { background: var(--sal-off); cursor: default; }
.sal-detail-box { padding: 6px 4px; line-height: 1.7; font-size: 12.5px; }
.sal-note { display: block; font-size: 11px; font-weight: 600; margin-top: 2px; }
.sal-note--blue { color: #3151A3; } .sal-note--amber { color: #B75E00; } .sal-note--green { color: #2E7D32; } .sal-note--red { color: var(--sal-primary); }
.sal-small { display: block; font-size: 11px; color: var(--sal-grey); font-weight: 500; margin-top: 2px; }
.sal-rev { text-decoration: line-through; color: var(--sal-grey); }
.sal-prog { height: 6px; background: #E5E5E5; border-radius: 4px; overflow: hidden; min-width: 70px; }
.sal-prog i { display: block; height: 100%; background: var(--sal-primary); }

@container (max-width: 1000px) {
  .sal-table { font-size: 12px; }
  .sal-table th { font-size: 10px; letter-spacing: .2px; }
  .sal-table th, .sal-table td { padding-left: 4px; padding-right: 4px; }
}
/* narrow (phone / small iPad): one card per row instead of a table */
@container (max-width: 760px) {
  .sal-table thead { display: none; }
  .sal-table tbody tr, .sal-table tfoot tr { display: block; border-bottom: 8px solid var(--sal-off); padding: 6px 4px; }
  .sal-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 4px 10px !important; text-align: right; }
  .sal-table td::before { content: attr(data-l); color: var(--sal-grey); text-align: left; font-size: 11px; text-transform: uppercase; flex: 0 0 auto; }
  .sal-table td.sal-name { width: auto; display: block; text-align: left; font-size: 14px; }
  .sal-table td.sal-name::before { content: none; }
  .sal-table td:empty { display: none; }
  .sal-table tr.sal-detail td { display: block; }
  .sal-table tr.sal-detail td::before { content: none; }
  .sal-table .sal-num { white-space: normal; }
  .sal-grid2 { grid-template-columns: 1fr !important; }
}

/* forms */
.sal-card { border: 1px solid #E5E5E5; border-radius: 8px; padding: 18px 20px; margin-bottom: 22px; }
.sal-field { margin-bottom: 12px; }
.sal-field label.sal-l { display: block; font-size: 12px; color: var(--sal-grey); margin-bottom: 4px; }
.sal-field input, .sal-field select, .sal-field textarea, .sal-input { width: 100%; padding: 8px 10px; border: 1px solid #DDD; border-radius: 4px; background: #fff; font-family: inherit; font-weight: 500; font-size: 13px; color: var(--sal-black); }
.sal-field textarea { resize: vertical; min-height: 56px; }
.sal-field input:hover, .sal-field select:hover { border-color: #BBB; }
.sal-field input:focus, .sal-field select:focus, .sal-field textarea:focus { outline: none; border-color: var(--sal-primary); }
.sal-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.sal-seg { display: flex; gap: 6px; }
.sal-seg label { flex: 1; border: 1px solid #DDD; border-radius: 6px; padding: 8px; text-align: center; cursor: pointer; font-size: 13px; }
.sal-seg label:hover { background: var(--sal-off); }
.sal-seg label.on { background: #FCEBE9; color: var(--sal-primary); border-color: #F4C5BF; font-weight: 600; }
.sal-seg input { display: none; }
.sal-err { color: var(--sal-primary); font-size: 12px; margin-top: 6px; }
.sal-box { background: var(--sal-off); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; margin-top: 10px; }
.sal-box--warn { background: #FFF3E0; color: #7a4a00; }
.sal-reasons { margin-top: 12px; border: 1px solid #DDD; background: var(--sal-off); border-radius: 8px; padding: 12px 14px; }
.sal-reasons h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.sal-opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: 6px; cursor: pointer; }
.sal-opt:hover { background: #fff; }
.sal-opt input { margin-top: 3px; accent-color: var(--sal-primary); }
.sal-opt b { font-weight: 500; display: block; }
.sal-opt span { color: var(--sal-grey); font-size: 12px; }
.sal-opt.is-off { opacity: .45; cursor: default; }

/* payment QR */
.sal-qrprev { border: 1px dashed #CCC; border-radius: 8px; min-height: 90px; display: flex; align-items: center; justify-content: center; padding: 8px; background: #fff; }
.sal-qrprev img { max-width: 180px; max-height: 180px; display: block; }
.sal-qrbig { display: flex; align-items: center; justify-content: center; min-height: 160px; }
.sal-qrbig img { width: 100%; max-width: 320px; height: auto; display: block; }

.sal-payqr { display: flex; align-items: center; justify-content: center; margin: 0 0 14px; padding: 10px; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; min-height: 60px; }
.sal-payqr[hidden] { display: none; }
.sal-payqr img { width: 100%; max-width: 260px; height: auto; display: block; }

/* gate */
.sal-gate { max-width: 380px; margin: 40px auto; }

/* modal + toast (appended to <body>) */
.sal-ov { position: fixed; inset: 0; background: rgba(26,26,26,.45); display: flex; align-items: center; justify-content: center; z-index: 5000; padding: 16px; }
.sal-modal { background: #fff; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.2); width: 460px; max-width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.sal-modal--wide { width: 560px; }
.sal-modal__h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #E5E5E5; }
.sal-modal__h h3 { margin: 0; font-size: 16px; font-weight: 500; }
.sal-modal__x { background: none; border: none; font-size: 22px; line-height: 1; color: var(--sal-grey); cursor: pointer; }
.sal-modal__b { padding: 18px 20px; overflow-y: auto; }
.sal-modal__f { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid #E5E5E5; }
.sal-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #1A1A1A; color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 6000; font-family: 'Montserrat', sans-serif; font-size: 13px; }
@media (max-width: 560px) { .sal-modal .sal-grid2 { grid-template-columns: 1fr; } }