/* ===== HotelMU-style theme (own stylesheet, modelled on the HotelMU screens the hotel uses) ===== */
:root { --hm-navy: #1f2030; --hm-bar: #2e4372; --hm-yellow: #ffd800; --hm-blue: #1a7cfa; --hm-cyan: #13809e; --hm-red: #c9302c; --hm-panel: #f0f0f0; --hm-line: #d8d8d8; }
body { font-family: "Roboto", "Segoe UI", Arial, sans-serif; background: #e9e9ee; }
.fa { margin-right: 4px; }

/* top bar: navy with yellow home button and yellow user box */
.topbar { background: var(--hm-navy); height: 56px; padding: 0 14px; }
.topbar .crumb { background: var(--hm-yellow); color: #111; font-size: 14px; font-weight: 500; padding: 7px 16px 7px 20px; }
.topbar .crumb:first-child { font-size: 16px; padding: 6px 18px; border-radius: 3px 0 0 3px; }
.userbox { background: var(--hm-yellow); color: #111; border-radius: 3px; padding: 7px 12px; gap: 14px; font-size: 16px; }
.userbox a { color: #111; font-size: 17px; text-decoration: none; position: relative; }
.userbox a .badge { position: absolute; top: -8px; right: -10px; font-size: 10px; }
.bizdate { color: #fff; margin-right: 12px; }

/* module / menu bar */
.menubar { background: var(--hm-bar); padding: 0 14px; top: 56px; min-height: 44px; }
.menubar .mi > span, .menubar .mi > a { color: #fff; font-size: 16px; font-weight: 400; padding: 12px 18px; display: block; text-decoration: none; }
.menubar .mi:hover > span, .menubar .mi:hover > a { background: #253862; }
.menubar .sub { border-top: 3px solid var(--hm-yellow); min-width: 260px; }
.menubar .sub a { padding: 9px 16px; font-size: 13.5px; border-bottom: 1px solid #eee; }

/* cards & headings */
main { padding: 24px 22px; }
.card { border-radius: 2px; box-shadow: none; border: 1px solid #e3e3e3; background: #fafafa; }
.card-h { border-bottom: 1px solid #e6e6e6; padding: 14px 30px; margin: -14px -16px 20px; }
.card-h h2 { font-size: 22px; font-weight: 400; color: #222; }

/* HotelMU buttons: outlined blue button groups at the top right, blue action buttons */
.btn { border-radius: 3px; font-size: 13.5px; }
.btn.primary, .btn.info { background: var(--hm-blue); border-color: var(--hm-blue); color: #fff; }
.btn.hm-red { background: var(--hm-red); border-color: #a52521; color: #fff; font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 12.5px; }
.btn.hm-green { background: #28a745; border-color: #23913c; color: #fff; }
.hm-btngroup { display: inline-flex; border: 1px solid var(--hm-blue); border-radius: 3px; overflow: hidden; }
.hm-btngroup .btn { border: 0; border-right: 1px solid var(--hm-blue); border-radius: 0; background: #fff; color: var(--hm-blue); font-size: 17px; padding: 6px 12px; }
.hm-btngroup .btn:last-child { border-right: 0; }
.hm-btngroup .btn:hover { background: #eef5ff; }
.btn.hm-outline { border: 1px solid var(--hm-blue); color: var(--hm-blue); background: #fff; }

/* tables: navy header, uppercase, centered */
table.t th { background: var(--hm-bar); color: #fff; text-transform: uppercase; text-align: center; vertical-align: middle; font-weight: 700; font-size: 13px; padding: 9px 8px; border-color: #44598a; }
table.t td { font-size: 14px; padding: 7px 10px; vertical-align: top; }
table.t tr:nth-child(even) td { background: #fff; }
table.t a.gname, a.gname { color: var(--hm-cyan); font-weight: 700; text-transform: uppercase; text-decoration: none; }
table.t tr.hm-overdue td { background: #ffff3d !important; }
table.t tr.hm-ed td { background: #5ec5fa !important; }
.hm-legend { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-weight: 600; font-size: 14px; }
.hm-legend i { width: 30px; height: 30px; border-radius: 2px; display: inline-block; }
.hm-pageinfo { color: #555; margin: 14px 0 8px; } .hm-pageinfo b { color: #222; }
.hm-pager { display: flex; gap: 6px; justify-content: flex-end; } .hm-pager a { border: 1px solid #ccc; border-radius: 3px; padding: 4px 10px; color: #333; background: #fff; text-decoration: none; }
.hm-pager a.on { background: #f0f0f0; font-weight: 700; }

/* "Action" dropdown */
.hm-act { position: relative; display: inline-block; }
.hm-act > button { background: var(--hm-blue); border: 0; color: #fff; border-radius: 3px; padding: 8px 14px; font-size: 16px; cursor: pointer; white-space: nowrap; }
.hm-act > button::after { content: ""; display: inline-block; margin-left: 8px; border: 5px solid transparent; border-top-color: #fff; vertical-align: -2px; }
.hm-act .menu { display: none; position: fixed; z-index: 70; background: #fff; border: 1px solid #ccc; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); min-width: 190px; text-align: left; }
.hm-act.open .menu { display: block; }
.hm-act .menu a { display: block; padding: 8px 14px; color: #222; text-decoration: none; font-size: 14px; } .hm-act .menu a:hover { background: #f1f5ff; }

/* home: welcome card + big tiles */
.hm-welcome .card-h h2 { font-size: 23px; }
.tiles { grid-template-columns: repeat(auto-fill, 213px); gap: 12px; }
.tile { height: 162px; border-radius: 2px; font-size: 17px; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); gap: 14px; }
.tile svg { width: 64px; height: 64px; }
.tile:hover { transform: none; filter: brightness(1.07); }

/* guest detail: grey header panel, side menu, panels */
.hm-gd-head { background: #e4e4e4; border: 1px solid #d0d0d0; padding: 10px; display: flex; gap: 14px; margin-bottom: 20px; }
.hm-gd-head .photo { width: 130px; height: 148px; background: #f4f4f4; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.hm-gd-head .photo img { max-width: 100%; max-height: 100%; }
.hm-kv { border-collapse: collapse; width: 100%; background: #fff; font-size: 12.5px; }
.hm-kv th { background: #dcdcdc; text-align: left; font-weight: 700; padding: 6px 10px; border: 1px solid #c8c8c8; width: 22%; vertical-align: top; }
.hm-kv td { padding: 6px 10px; border: 1px solid #c8c8c8; vertical-align: top; }
.hm-kv input.mini { width: 30px; padding: 0 3px; text-align: center; }
.hm-side { width: 330px; flex: none; border: 1px solid #d0d0d0; background: #f6f6f6; align-self: flex-start; }
.hm-side a { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-bottom: 1px solid #ddd; color: #333; font-size: 12.5px; text-decoration: none; }
.hm-side a:hover { background: #ececec; } .hm-side a.active { background: var(--hm-blue); color: #fff; }
.hm-panel { border: 1px solid #d0d0d0; background: #f3f3f3; margin-bottom: 18px; }
.hm-panel > .ph { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #d6d6d6; background: #f7f7f7; min-height: 40px; }
.hm-panel > .ph .ic { width: 38px; text-align: center; color: #555; border-right: 1px solid #d6d6d6; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.hm-panel > .ph h3 { margin: 0; flex: 1; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 400; font-size: 17px; color: #444; }
.hm-panel > .ph .tools { display: flex; align-self: stretch; } .hm-panel > .ph .tools > * { border-radius: 0; }
.hm-panel > .pb { padding: 0; background: #fff; } .hm-panel > .pb.pad { padding: 10px; }
.hm-panel .pfoot { display: flex; justify-content: flex-end; padding: 8px 10px; background: #f3f3f3; }
.hm-bigblue { display: block; width: 100%; background: var(--hm-blue); color: #fff; border: 0; border-radius: 2px; padding: 9px; font-size: 16px; cursor: pointer; }
.hm-info { background: #dff3fc; border: 1px solid #bfe3f5; padding: 8px 12px 8px 30px; font-size: 11.5px; position: relative; margin-bottom: 8px; }
.hm-info::before { content: "i"; position: absolute; left: 9px; top: 40%; width: 13px; height: 13px; border-radius: 50%; background: #1e66b7; color: #fff; font-size: 10px; text-align: center; line-height: 13px; font-weight: 700; }
.hm-tabsr a { padding: 10px 16px; color: var(--hm-blue); font-family: "Oswald", "Arial Narrow", sans-serif; text-decoration: none; display: flex; align-items: center; }
.hm-tabsr a.on { background: var(--hm-blue); color: #fff; }
table.t td input.num { width: 100%; text-align: right; }
.hm-shown { display: block !important; }
@media (max-width: 900px) { .hm-side { width: 100%; } .hm-gd-head { flex-direction: column; } }

/* reservation form wizard (Choose / Step 1-3) */
.hm-times { display: flex; flex-wrap: wrap; gap: 8px 60px; align-items: center; padding: 12px 20px; margin: 0 0 30px; }
.hm-times::before { display: none; }
.hm-times .fa { color: #1f2a44; font-size: 15px; }
.hm-wz { border: 1px solid #ddd; background: #f4f4f4; padding: 18px 18px 16px; }
.hm-steps { display: flex; align-items: center; background: #f7f7f7; border: 1px solid #ddd; margin-bottom: 4px; min-height: 46px; }
.hm-steps > span { position: relative; padding: 12px 26px 12px 30px; color: #999; font-size: 16px; }
.hm-steps > span::after { content: ""; position: absolute; right: -12px; top: 0; border-left: 12px solid #ddd; border-top: 23px solid transparent; border-bottom: 23px solid transparent; z-index: 1; }
.hm-steps > span b { display: inline-block; min-width: 24px; height: 18px; border-radius: 9px; background: #999; color: #fff; font-size: 11px; text-align: center; line-height: 18px; margin-right: 6px; }
.hm-steps > span.on { background: #eaf2fb; color: #2a6fbe; }
.hm-steps > span.on b { background: #2a6fbe; }
.hm-steps > span.done { color: #3c8d3c; }
.hm-steps > span.done b { background: #3c8d3c; }
.hm-steps .tools { margin-left: auto; padding: 6px 14px; display: flex; gap: 4px; }
table.hm-form { width: 100%; border-collapse: collapse; background: #fff; font-size: 12.5px; }
table.hm-form td { border: 1px solid #ddd; padding: 8px 10px; vertical-align: top; }
table.hm-form td:first-child { width: 27%; }
table.hm-form .hm-th { background: #fff; text-align: center; font-weight: 700; font-size: 11.5px; padding: 6px; border: 1px solid #ddd; color: #222; }
table.hm-form input:not([type=radio]):not([type=checkbox]), table.hm-form select { width: 220px; max-width: 100%; padding: 4px 6px; }
table.hm-form input[readonly] { background: #eee; }
table.hm-form .hint { font-style: italic; font-size: 11.5px; color: #333; }
table.hm-form div.hint { margin-top: 3px; }
.hm-r { margin-right: 10px; white-space: nowrap; }
.hm-pk { width: 26px; height: 24px; border-radius: 3px; border: 1px solid #0e6e8e; background: linear-gradient(#21a4c9, #1185aa); vertical-align: middle; cursor: pointer; }
.btn.hm-lg { font-size: 16px; padding: 8px 18px; }
.hm-rooms .floor { margin: 4px 0 6px 0; }
.hm-floors { padding: 16px 10px !important; }
label.hm-rt { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; margin-right: 6px; border-radius: 3px; background: #50be50; color: #fff; font-weight: 600; cursor: pointer; }
label.hm-rt.ed { background: #1bb2e9; }
label.hm-rt input { margin: 0; }
label.hm-rt:has(input:checked) { outline: 3px solid #1c1f2e; outline-offset: 1px; }
label.hm-rt .hk, .hm-room .hk, .hm-hkleg em.hk { position: absolute; right: -7px; bottom: -8px; width: 18px; height: 18px; background: #fff; border: 1px solid #c8c8c8; border-radius: 2px; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.hk .fa { margin: 0; }
.hk.ready, .hk.ready .fa { color: #3aa53a; } .hk.dirty, .hk.dirty .fa { color: #9a6b2e; } .hk.notready, .hk.notready .fa { color: #e0262b; }

/* Front Office dashboard tabs and room tiles */
.hm-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-tabs a { background: #3b5285; color: #fff; padding: 9px 22px; font-size: 16px; min-width: 120px; text-align: center; text-decoration: none; }
.hm-tabs a.active { background: #1fa6e0; font-weight: 700; }
.hm-tabs a:hover { opacity: .92; text-decoration: none; }
.hm-tabbody { border: 1px solid #ccc; padding: 12px; background: #fafafa; }
.hm-tabbody .legend { font-size: 13px; font-weight: 600; }
.hm-tabbody .legend i { width: 15px; height: 15px; }
.hm-hkleg span { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.hm-hkleg em.hk { position: static; width: 26px; height: 26px; font-size: 14px; font-style: normal; }
.room.hm-room { width: 66px; height: 40px; font-size: 15px; border-radius: 3px; margin-right: 6px; }
.room.hm-room .fa-caret-down { font-size: 11px; margin: 0 0 0 3px; }
.rtype h4 { font-size: 15px; }
.pop.hm-pop { min-width: 170px; max-width: 240px; padding: 6px 4px; font-size: 15px; border-radius: 3px; }
.pop.hm-pop .ttl { font-weight: 700; padding: 3px 8px; }
.pop.hm-pop div, .pop.hm-pop a { padding: 3px 8px; }
.pop.hm-pop a { color: #222; }
.pop.hm-pop a.nm { color: #222; }
.pop.hm-pop a:hover { background: #eef3fb; }

/* Actual Room Occupied */
table.hm-occ tr.tot td { background: #eee; }

/* Back Office sales pages */
.hm-salestop { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.hm-salestop .hm-tabs a { font-size: 15px; padding: 8px 20px; }
.hm-rtitle { text-align: center; font-weight: 400; font-size: 20px; margin: 24px 0 4px; color: #222; }
.hm-rsub { text-align: center; font-size: 18px; margin-bottom: 18px; }
.hm-note { background: #cfe6fb; border: 1px solid #b6d6f5; color: #1c3f72; font-weight: 700; font-size: 12.5px; padding: 14px 18px; margin: 10px 0 18px; }
table.hm-sales td { font-size: 12.5px; }
table.hm-sales.hm-grid td, table.hm-sales.hm-grid th { font-size: 11.5px; padding: 5px 7px; }
.hm-cell { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.hm-cell > span:last-child { text-align: right; margin-left: auto; }
.hm-cell a { color: var(--hm-cyan); font-weight: 600; }
table.t tr.hm-sec td { background: #e6e6e6 !important; font-weight: 700; }
table.t tr.hm-totrow td { background: #f0f0f0 !important; font-weight: 700; }
.btn.hm-spaced { letter-spacing: 3px; font-weight: 700; }
table.hm-ar td { font-size: 13px; }

/* ===== phones & small tablets ===== */
.hamb { display: none; background: none; border: 0; color: #fff; font-size: 22px; padding: 4px 10px 4px 0; cursor: pointer; }
.menubar .mi.open .sub { display: block; }
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .hamb { display: block; }
  .topbar { height: auto; min-height: 50px; flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .crumbs { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar .crumb { font-size: 12px; padding: 5px 12px 5px 16px; }
  .topbar .crumb:first-child { font-size: 14px; padding: 5px 12px; }
  .topright { width: 100%; justify-content: space-between; gap: 6px; }
  .bizdate { font-size: 11px; margin: 0; white-space: normal; }
  .bizdate .small, .bizdate .pill { display: none; }
  .userbox { font-size: 14px; padding: 5px 10px; gap: 14px; }
  .userbox > span:first-child { display: none; }
  .menubar { display: none; position: static; padding: 0; }
  .menubar.open { display: block; max-height: 75vh; overflow-y: auto; }
  .menubar .mi > span, .menubar .mi > a { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 15px; }
  .menubar .mi:hover .sub { display: none; }
  .menubar .mi.open .sub { display: block; position: static; box-shadow: none; border-radius: 0; border-top: 0; min-width: 0; }
  .menubar .sub a { padding: 11px 26px; font-size: 14px; white-space: normal; }
  main { padding: 8px 6px; }
  .card { padding: 10px; }
  main .card { overflow-x: auto; }
  .card-h { margin: -10px -10px 12px; padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .card-h h2 { font-size: 18px; }
  .hm-btngroup { flex-wrap: wrap; }
  .hm-btngroup .btn { font-size: 13px; padding: 6px 9px; }
  .filter { padding: 8px; }
  .filter .fg { min-width: 0; flex: 1 1 140px; }
  input, select, textarea { max-width: 100%; font-size: 16px; } /* 16px stops iOS zooming into fields */
  table.t th { font-size: 11px; padding: 6px 5px; }
  table.t td { font-size: 12.5px; padding: 6px 6px; }
  table.hm-form tr { display: flex; flex-direction: column; }
  table.hm-form td, table.hm-form th { width: 100% !important; border-bottom: 0; }
  table.hm-form td:first-child { background: #f3f3f3; font-weight: 600; padding: 6px 8px; }
  table.hm-form input:not([type=radio]):not([type=checkbox]), table.hm-form select, table.hm-form textarea { width: 100% !important; }
  table.hm-form .hm-pk + i, table.hm-form .hint { display: block; }
  .hm-kv, .hm-kv tbody, .hm-kv tr { display: block; }
  .hm-kv tr { display: grid; grid-template-columns: 38% 62%; }
  .hm-kv th, .hm-kv td { width: auto !important; }
  .hm-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .hm-tabs a, .hm-salestop .hm-tabs a { min-width: 0; padding: 8px 12px; font-size: 13px; white-space: nowrap; flex: none; }
  .hm-tabbody { padding: 8px 6px; }
  .hm-steps { flex-wrap: wrap; }
  .hm-steps > span { padding: 10px 14px 10px 16px; font-size: 13px; }
  .hm-steps .tools { width: 100%; justify-content: flex-end; }
  .hm-wz { padding: 8px; }
  .hm-times { gap: 4px 16px; margin-bottom: 14px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile { height: 112px; font-size: 13px; text-align: center; padding: 0 4px; }
  .tile .fa { font-size: 38px !important; }
  .row { flex-direction: column; }
  .hm-side { width: 100%; display: flex; overflow-x: auto; }
  .hm-side a { flex: none; border-bottom: 0; border-right: 1px solid #ddd; padding: 10px 12px; white-space: nowrap; }
  .hm-gd-head .photo { width: 100px; height: 110px; }
  .mask { padding: 0; }
  .modal, .modal.lg, .modal.xl { max-width: 100%; border-radius: 0; min-height: 100vh; }
  .modal .mb { max-height: none; }
  .hm-legend { font-size: 12px; } .hm-legend i { width: 22px; height: 22px; flex: none; }
  .room.hm-room { width: 58px; height: 36px; font-size: 13px; }
  .floor > .fl { width: 52px; }
  .hm-rsub { font-size: 15px; } .hm-rtitle { font-size: 17px; }
  .btns { flex-wrap: wrap; }
  .stat { flex-wrap: wrap; }
}
table.hm-sales:not(.hm-grid) td:not(:first-child) { min-width: 210px; }
.hm-infocol { min-width: 240px; }
.hm-cell > span:last-child { white-space: nowrap; }
@media (max-width: 760px) {
  .hm-infocol { min-width: 130px; }
  table.hm-sales:not(.hm-grid) td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 130px; max-width: 150px; box-shadow: 2px 0 3px rgba(0, 0, 0, .08); }
  table.hm-sales:not(.hm-grid) tr.hm-sec td:first-child { position: static; }
  table.hm-sales:not(.hm-grid) td:not(:first-child) { min-width: 180px; }
}
@media (max-width: 760px) { table.hm-form input:has(+ .hm-pk) { width: calc(100% - 36px) !important; } }

/* per-property theme (colours set from Setting > Company: logo / picked colours) */
.topbar .crumb, .userbox, .userbox a { color: var(--hm-on-accent, #111); }
.bizdate, .hamb { color: var(--hm-on-navy, #fff); }
.bizdate b { color: var(--hm-yellow); }
.menubar .mi > span, .menubar .mi > a { color: var(--hm-on-bar, #fff); }
.menubar .mi:hover > span, .menubar .mi:hover > a, .menubar .mi.open > span { background: var(--bar2); }
.hm-tabs a { background: var(--hm-bar); color: var(--hm-on-bar, #fff); }
.hm-tabs a.active { background: var(--hm-blue); color: var(--hm-on-button, #fff); }
.btn.primary, .btn.info, .hm-act > button { color: var(--hm-on-button, #fff); }
.hm-btngroup { border-color: var(--hm-blue); } .hm-btngroup .btn { color: var(--hm-blue); border-right-color: var(--hm-blue); }
.tb-logo { height: 38px; max-width: 120px; object-fit: contain; background: #fff; border-radius: 3px; padding: 2px 4px; margin-right: 10px; }
.brand-logo { width: 220px; height: 120px; border: 1px dashed #bbb; background: #fff; display: flex; align-items: center; justify-content: center; }
.brand-logo img { max-width: 210px; max-height: 110px; }
@media (max-width: 760px) { .tb-logo { height: 30px; max-width: 80px; margin-right: 6px; } }
.login .btn { background: var(--hm-bar); color: var(--hm-on-bar, #fff); } .login { background: linear-gradient(135deg, var(--hm-navy), var(--hm-bar)); }
/* Guest Bill Information */
table.hm-bill td.rp { white-space: nowrap; } table.hm-bill td.rp span:first-child { float: left; } table.hm-bill td.rp span:last-child { float: right; }
table.hm-bill td.rp::after { content: ""; display: block; clear: both; }
.login .btn { background: var(--hm-yellow); color: var(--hm-on-accent, #111); font-weight: 700; }

.topbar .crumbs { flex: 1; min-width: 0; }
.tb-logo { height: 44px; max-width: 150px; background: none; padding: 0; border-radius: 0; margin-right: 14px; cursor: pointer; }
@media (max-width: 760px) { .tb-logo { height: 34px; max-width: 90px; margin-right: 8px; } }
/* List Reservation */
table.t tr.hm-today td { background: #ffa24c !important; }
table.hm-reslist td { font-size: 12.5px; }
table.hm-reslist td.rp, table.hm-ar td.rp { white-space: nowrap; min-width: 120px; } table.hm-reslist td.rp span:first-child { float: left; } table.hm-reslist td.rp span:last-child { float: right; }
/* Pembayaran Tamu > guest */
.hm-paytop { gap: 10px; align-items: stretch; flex-wrap: wrap; }
.hm-billsum th label { font-weight: 700; } .hm-billsum th div { font-weight: 700; margin-top: 2px; }
.hm-billsum td { font-weight: 700; } .hm-total { letter-spacing: 3px; font-weight: 700; background: #dcdcdc; }
.hm-mini { text-align: right; margin-top: 2px; } .hm-mini .btn { font-size: 10.5px; padding: 1px 6px; margin-left: 3px; border-radius: 2px; }
.hm-billsum { min-width: 330px; } .hm-billsum th { width: 46% !important; } .hm-billsum td.num { white-space: nowrap; }

/* Dirty to Clean */
.btn.hm-teal { background: #17a2b8; border-color: #138c9e; color: #fff; margin: 4px 0 10px; }
.hm-cltype h4 { font-size: 14px; margin: 14px 0 10px; }
label.hm-rt.hm-clean { height: 36px; min-width: 60px; margin: 0 8px 8px 0; color: #fff; }

.hm-alert { background: #fde8e8; border: 1px solid #f3b6b6; color: #b42318; padding: 9px 12px; font-size: 12px; }
.hm-alert .fa { color: #d9241c; }
input.sep { font-variant-numeric: tabular-nums; } td input.sep, input.sep.num { text-align: right; }

.hm-picgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 12px; }
.hm-picgrid label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Outlet Posting (Transaksi) */
table.hm-form .hm-band { background: var(--hm-bar); color: var(--hm-on-bar, #fff); text-align: center; font-size: 12px; padding: 10px; border: 1px solid #3a4f80; }
.hm-sugg { position: absolute; z-index: 50; left: 80px; top: 100%; width: 420px; max-width: 90%; background: #fff; border: 1px solid #ccc; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); max-height: 320px; overflow: auto; text-align: left; }
.hm-sugg a { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; color: #222; text-decoration: none; font-weight: 400; font-size: 13px; border-bottom: 1px solid #eee; }
.hm-sugg a b { margin-left: auto; } .hm-sugg a:hover { background: #eef3fb; }

/* amounts: "Rp." directly in front of the number */
td.rp { text-align: right; white-space: nowrap; }
td.rp span, table.hm-bill td.rp span, table.hm-reslist td.rp span { float: none !important; }
td.rp span:first-child { margin-right: 4px; }
td.rp::after { display: none !important; }

table.t th.hm-sort { cursor: pointer; user-select: none; } table.t th.hm-sort:hover { background: var(--bar2); } table.t th.hm-sort .fa { opacity: .55; margin-left: 3px; } table.t th.hm-sort.on .fa { opacity: 1; color: var(--hm-yellow); }

/* field suggestions (phone number -> guest, number history) */
.fld-pop { position: fixed; z-index: 3000; background: #fff; border: 1px solid #c9ced6; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); max-height: 300px; overflow: auto; max-width: min(460px, calc(100vw - 16px)); font-size: 13px; }
.fld-pop-h { padding: 6px 10px; background: #f3f5f8; color: #555; font-size: 11.5px; border-bottom: 1px solid #e3e6ea; }
.fld-pop a { display: flex; gap: 10px; align-items: center; padding: 7px 10px; color: #222; text-decoration: none; border-bottom: 1px solid #eee; }
.fld-pop a:hover, .fld-pop a.on { background: #eef3fb; }
.num-hint { display: block; font-size: 11.5px; color: #1d6b3a; margin-top: 3px; font-weight: 400; line-height: 1.35; }
.num-hint.warn { color: #b3261e; }

tr.hm-ot td { background: #fff8e6; }

.hm-denied { min-height: 60vh; padding: 24px 0; }

input.calc { background: #f3f5f8; font-weight: 700; }

.hm-rt .hm-mine { display: inline-block; margin-left: 4px; font-size: 9px; background: #1d3b6e; color: #fff; border-radius: 3px; padding: 0 3px; vertical-align: 2px; }

/* login: MagnusLodgix logo on top, then the property being signed in to */
.login-prop { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; padding: 8px 0; border-top: 1px solid #eceef2; border-bottom: 1px solid #eceef2; color: #4b5260; font-weight: 600; }
.login-prop img { max-height: 40px; max-width: 90px; border-radius: 4px; }

/* HotelMU FO reports */
.hm-filter td { padding: 6px 10px; } .hm-filter td:nth-child(odd) { background: #f6f7f9; font-size: 12.5px; }
.hm-grid th { background: var(--hm-navy, #1d3b6e); color: var(--hm-on-navy, #fff); text-align: center; font-size: 11.5px; vertical-align: middle; }
.hm-gbr td { font-size: 12px; vertical-align: top; } .hm-gbr th { font-size: 10.5px; padding: 6px 4px; }