/*
     * Invoice Software Demo — For testing and evaluation purposes only. Use demonstration data only. © 2026 Rocksuhag.cloud. All rights reserved.
     *
     * Editor styles may be adjusted independently of the printed invoice.
     * Avoid changing the fixed .paper dimensions or position-based invoice layout
     * unless the company's reference template itself has been revised.
     */
    * {
      box-sizing:border-box
    }
    body {
      margin:0;
      background:#eef2f6;
      color:#1a293b;
      font:14px Arial,Helvetica,sans-serif
    }
    .bar {
      padding:18px 26px;
      background:#173b5d;
      color:white;
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:center
    }
    .bar h1 {
      font-size:21px;
      margin:0 0 4px
    }
    .bar p {
      font-size:12px;
      margin:0;
      color:#dbe8f4
    }
    .btn {
      background:#e7edf3;
      border:1px solid #cbd6e1;
      padding:10px 15px;
      border-radius:6px;
      cursor:pointer;
      font-weight:700;
      color:#18334d
    }
    .btn.primary {
      background:#0f6ca5;
      color:white;
      border-color:#0f6ca5
    }
    .btn.red {
      color:#9b2929;
      background:#fff2f2;
      border-color:#efcbcb
    }
    .workspace {
      max-width:1700px;
      margin:20px auto;
      padding:0 18px;
      display:grid;
      grid-template-columns:minmax(370px,530px) minmax(0,1fr);
      gap:20px;
      align-items:start
    }
    .editor {
      min-width:0
    }
    .panel {
      background:white;
      margin-bottom:16px;
      padding:18px;
      border-radius:9px;
      box-shadow:0 1px 9px #253a5412
    }
    .panel h2 {
      font-size:15px;
      margin:0 0 14px;
      padding-bottom:10px;
      border-bottom:1px solid #e7eaf0
    }
    .fields {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px
    }
    .field {
      font-size:11px;
      font-weight:700;
      color:#4b5d6e;
      display:flex;
      flex-direction:column;
      gap:5px
    }
    .field.wide {
      grid-column:1/-1
    }
    input,textarea,select {
      min-width:0;
      width:100%;
      padding:9px 10px;
      font:13px Arial,sans-serif;
      border:1px solid #c9d5df;
      border-radius:5px;
      color:#192b3c
    }
    textarea {
      min-height:72px;
      resize:vertical
    }
    .buttons {
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin:12px 0
    }
    .note {
      font-size:12px;
      color:#607185;
      line-height:1.5
    }
    .item-form {
      padding:12px 10px;
      margin-bottom:10px;
      border:1px solid #e2e8ef;
      border-radius:6px;
      background:#fafbfd
    }
    .item-form>div:first-child {
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-weight:700;
      margin-bottom:10px
    }
    .item-fields {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px
    }
    .preview-panel {
      background:white;
      border-radius:9px;
      box-shadow:0 1px 9px #253a5412;
      overflow:hidden;
      position:sticky;
      top:10px
    }
    .preview-top {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:12px 15px;
      background:#fff;
      border-bottom:1px solid #e2e7ee
    }
    .preview-top h2 {
      font-size:15px;
      margin:0
    }
    .scroll {
      overflow:auto;
      padding:16px;
      background:#d6dbe2
    }
    .page-space {
      position:relative;
      width:816px;
      height:1056px;
      margin:auto;
      flex-shrink:0
    }
    /* The printable Letter-sized page uses a fixed pixel coordinate system. */
    .paper {
      position:relative;
      background:#fff;
      width:816px;
      height:1056px;
      color:#000;
      font-family:Arial,Helvetica,sans-serif;
      font-weight:400;
      box-shadow:0 2px 12px #2d3b4c2e;
      overflow:hidden;
      font-size:9px;
      transform-origin:top left
    }
    .paper * {
      box-sizing:border-box
    }
    .invoice-logo {
      position:absolute;
      left:79px;
      top:49px;
      width:60px;
      height:66px;
      object-fit:contain
    }
    .company-title {
      position:absolute;
      top:56px;
      left:193px;
      width:440px;
      text-align:center;
      font-size:28px;
      font-weight:400;
      color:#777;
      line-height:1.15
    }
    .company-office {
      position:absolute;
      top:96px;
      left:143px;
      width:560px;
      text-align:center;
      font-size:8.5px;
      white-space:nowrap
    }
    .company-contact {
      position:absolute;
      top:118px;
      left:177px;
      width:502px;
      text-align:center;
      font-size:8.5px;
      white-space:nowrap
    }
    .invoice-heading {
      position:absolute;
      top:166px;
      left:0;
      width:100%;
      text-align:center;
      color:#777;
      font-size:20px;
      font-weight:400
    }
    .info {
      position:absolute;
      top:198px;
      left:73px;
      width:693px;
      height:150px;
      display:grid;
      grid-template-columns:171px 225px 295px;
      border:1px solid #000;
      background:white;
      font-size:8.5px;
      line-height:15px
    }
    .info-col {
      position:relative;
      height:148px;
      min-width:0;
      overflow:hidden
    }
    .info-col:not(:last-child) {
      border-right:1px solid #000
    }
    .info-item {
      position:absolute;
      left:4px;
      right:3px;
      height:15px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:clip
    }
    .info-item.strong {
      font-weight:700
    }
    .right-row {
      position:absolute;
      left:4px;
      right:1px;
      height:15px;
      display:grid;
      grid-template-columns:94px 9px minmax(0,1fr);
      align-items:center;
      white-space:nowrap;
      overflow:hidden
    }
    .right-row .right-label {
      min-width:0
    }
    .right-row .right-colon {
      text-align:center
    }
    .right-row .right-value {
      overflow:hidden;
      white-space:nowrap;
      text-overflow:clip;
      padding-left:0
    }
    .right-row.strong {
      font-weight:700
    }
    .pay-row {
      position:absolute;
      left:179px;
      top:4px;
      right:3px;
      height:15px;
      display:grid;
      grid-template-columns:62px 9px minmax(0,1fr);
      white-space:nowrap;
      align-items:center
    }
    .pay-row .pay-colon {
      text-align:center
    }
    .invoice-table-wrap {
      position:absolute;
      left:73px;
      top:353px;
      width:693px
    }
    .invtable {
      border-collapse:collapse;
      table-layout:fixed;
      width:100%;
      font-size:8.5px;
      line-height:1.17
    }
    .invtable th,.invtable td {
      border:1px solid #000;
      padding:2px 2px;
      text-align:center;
      font-weight:400;
      vertical-align:middle;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:clip
    }
    .invtable thead tr:first-child th {
      height:22px
    }
    .invtable thead tr:last-child th {
      height:20px
    }
    .invtable .trow td {
      height:21px
    }
    .invtable th.product,.invtable td.product {
      text-align:left;
      padding-left:4px
    }
    .invtable th:first-child,.invtable td:first-child {
      text-align:left;
      padding-left:4px
    }
    .invtable .total-row td {
      height:24px
    }
    .invtable .total-row td:first-child {
      text-align:right;
      padding-right:8px;
      font-weight:700
    }
    .total-wrap {
      margin-top:6px
    }
    .summaries {
      width:171px;
      margin:5px 12px 0 auto;
      font-size:8.5px
    }
    .summaries>div {
      display:grid;
      grid-template-columns:115px 56px;
      margin:5px 0;
      text-align:right
    }
    .summaries b {
      font-weight:400
    }
    .inwords {
      position:relative;
      margin-top:5px;
      font-size:8.5px;
      padding-left:3px
    }
    .signatures {
      position:absolute;
      left:77px;
      right:52px;
      bottom:79px;
      display:flex;
      justify-content:space-between;
      text-align:center;
      font-size:8.5px
    }
    .signatures>div {
      width:130px
    }
    .sigline {
      border-top:1px solid #000;
      padding-top:7px
    }
    .bottom-rule {
      position:absolute;
      bottom:65px;
      left:73px;
      width:693px;
      border-top:0
    }
    .bottom-rule:after {
      content:'';
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:693px;
      border-top:1px solid #777;
      transform:translateY(0)
    }
    .page-number {
      position:absolute;
      bottom:47px;
      right:54px;
      font-size:8px
    }
    .subtotal {
      margin-top:10px;
      color:#56677b;
      font-size:12px
    }
    .subtotal b {
      color:#193b5b
    }
    @media(max-width:1180px) {
      .workspace {
        grid-template-columns:1fr
      }
      .preview-panel {
        position:static
      }
      .editor {
        max-width:none
      }
    }
    @media(max-width:480px) {
      .workspace {
        padding:0 7px
      }
      .bar {
        padding:13px;
        flex-wrap:wrap
      }
      .fields {
        grid-template-columns:1fr
      }
      .item-fields {
        grid-template-columns:repeat(2,minmax(0,1fr))
      }
      .scroll {
        padding:5px
      }
    }
    /* Hide editing controls and preserve the reference layout in exported PDFs. */
    @media print {
      @page {
        size:letter portrait;
        margin:0
      }
      html,body {
        background:#fff!important;
        margin:0!important;
        padding:0!important;
        width:816px!important;
        height:1056px!important;
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact
      }
      .bar,.editor,.preview-top {
        display:none!important
      }
      .workspace {
        margin:0!important;
        padding:0!important;
        display:block!important;
        max-width:none!important
      }
      .preview-panel {
        margin:0!important;
        padding:0!important;
        box-shadow:none!important;
        border:0!important;
        position:static!important;
        overflow:visible!important
      }
      .scroll {
        margin:0!important;
        padding:0!important;
        overflow:visible!important;
        background:#fff!important;
        width:816px!important
      }
      .page-space {
        width:816px!important;
        height:1056px!important;
        margin:0!important
      }
      .paper {
        width:816px!important;
        height:1056px!important;
        transform:none!important;
        margin:0!important;
        box-shadow:none!important;
        overflow:hidden!important;
        break-inside:avoid!important
      }
    }