:root {
    --ink: #122033;
    --muted: #60708a;
    --line: #dbe5f2;
    --panel: #ffffff;
    --bg: #eef6fd;
    --blue: #1f76f2;
    --cyan: #08acd0;
    --green: #17a865;
    --lime: #7bd414;
    --orange: #ff7a16;
    --red: #f04438;
    --purple: #8938e8;
    --pink: #d22e91;
    --nav: #074c7e;
    --teal: #0f8277;
    --brown: #8b341a;
    --shadow: 0 24px 55px rgba(46, 71, 103, .13);
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: linear-gradient(135deg, #eefaff 0%, #f8fbff 55%, #f5f1ff 100%);
    font: 15px/1.45 "Segoe UI", Arial, sans-serif;
}
button, input, select, textarea { font: inherit; }
button, .primary-link, .soft-link, .soft-btn {
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 12px 28px rgba(31, 118, 242, .22);
}
button:hover, .primary-link:hover { filter: brightness(.96); transform: translateY(-1px); }
.soft-link, .soft-btn {
    color: #1256cc;
    background: #edf4ff;
    box-shadow: none;
}
.danger {
    background: linear-gradient(135deg, #f04438, #ff7a16);
    box-shadow: none;
}
.whatsapp {
    background: linear-gradient(135deg, #1fa855, #3fd47d);
    box-shadow: none;
    white-space: nowrap;
}
.blink { animation: blink 1s infinite; }
@keyframes blink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(31,168,85,.45); }
    50% { box-shadow: 0 0 0 9px rgba(31,168,85,0); }
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(18, 32, 51, .56);
}
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    padding: 26px 14px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(7, 76, 126, .98), rgba(15, 130, 119, .94) 58%, rgba(139, 52, 26, .96)),
        #0c4d74;
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 40;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    padding: 0 10px;
    font-size: 19px;
}
.brand span {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #0e5d89;
    font-weight: 950;
}
nav { display: grid; gap: 7px; }
nav a, .logout {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.9);
    text-decoration: none;
    padding: 13px 14px;
    border-radius: 12px;
    font-weight: 800;
}
nav svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    opacity: .92;
}
nav a.active, nav a:hover, .logout:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.logout { margin-top: auto; }

.app { margin-left: 260px; min-height: 100vh; }
.topbar {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 34px;
    background: rgba(255,255,255,.82);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar-title {
    min-width: 0;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hamburger {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
}
.hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 3px auto;
    border-radius: 99px;
    background: #fff;
}
.topbar p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .08em;
}
.topbar h1 { margin: 2px 0 0; font-size: 27px; letter-spacing: 0; }
.profile-area { position: relative; }
.profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 6px;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    font-weight: 900;
}
.profile-chip:hover { background: #edf4ff; transform: none; }
.profile-chip span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    box-shadow: 0 10px 24px rgba(210, 46, 145, .24);
}
.profile-chip span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 14px);
    width: 270px;
    color: #fff;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #074c7e, #0f8277 62%, #8b341a);
    box-shadow: 0 24px 60px rgba(18, 32, 51, .24);
    z-index: 60;
}
.profile-card {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 20px 16px 16px;
    text-align: center;
}
.profile-card small { color: rgba(255,255,255,.85); font-weight: 800; }
.profile-photo {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    font-size: 28px;
    font-weight: 950;
}
.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.25);
}
.profile-actions .soft-btn {
    flex: 1;
    padding: 9px 12px;
    color: #073c72;
    background: #fff;
    text-decoration: none;
}
.page-shell { padding: 34px; }
.hero-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 24px;
    color: #fff;
    border-radius: 18px;
    background: linear-gradient(135deg, #1f76f2, #0fc5d8 52%, #17a865);
    box-shadow: var(--shadow);
}
.hero-strip span { font-weight: 900; opacity: .88; }
.hero-strip h2 { margin: 7px 0 0; max-width: 720px; font-size: 25px; letter-spacing: 0; }
.hero-strip .primary-link { background: rgba(255,255,255,.18); box-shadow: none; }

.stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.stat {
    min-height: 140px;
    color: #fff;
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--shadow);
}
.stat span { display: block; font-weight: 900; }
.stat strong { display: block; margin-top: 8px; font-size: 30px; line-height: 1.15; }
.stat.blue { background: linear-gradient(135deg, #2468f2, #0db4cf); }
.stat.green { background: linear-gradient(135deg, #15a665, #7bd414); }
.stat.orange { background: linear-gradient(135deg, #ff9114, #f04438); }
.stat.purple { background: linear-gradient(135deg, #8445ee, #b22fd2); }
.stat.pink { background: linear-gradient(135deg, #d22e91, #8938e8); }

.panel {
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
    overflow: hidden;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 24px;
}
.panel h2 { margin: 0; font-size: 25px; letter-spacing: 0; }
.panel p { margin: 4px 0 0; color: var(--muted); }
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 16px;
    padding: 22px 24px;
    border-top: 1px solid var(--line);
    background: #f7fbff;
}
label {
    display: grid;
    gap: 7px;
    color: #465a78;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
}
input, select, textarea {
    width: 100%;
    border: 1px solid #cbd8ea;
    border-radius: 12px;
    padding: 13px 14px;
    color: var(--ink);
    background: #fff;
    outline: none;
}
input[type="file"] {
    padding: 10px;
    background: #fff;
}
input[type="file"]::file-selector-button {
    margin-right: 12px;
    border: 0;
    border-radius: 9px;
    padding: 9px 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    font-weight: 900;
    cursor: pointer;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(31, 118, 242, .12);
}
textarea { min-height: 48px; resize: vertical; }
fieldset.permissions {
    grid-column: 1 / -1;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 14px;
}
fieldset.permissions label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    text-transform: none;
}
fieldset.permissions input { width: auto; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td {
    padding: 15px 24px;
    border-top: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}
th {
    color: #435878;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 950;
    background: #f8fbff;
}
td.actions { display: flex; gap: 8px; flex-wrap: wrap; }
td.actions button { padding: 8px 12px; border-radius: 10px; }
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #daf7e8;
    color: #087c45;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 900;
}
.muted { color: var(--muted); }
.report-grid { display: grid; gap: 24px; }

.payment-groups { display: grid; gap: 18px; padding: 0 24px 24px; }
.company-history {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.company-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
}
.company-history h3 { margin: 0; font-size: 21px; }
.company-history-head span {
    background: rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
}
.project-history { padding: 18px 20px; border-top: 1px solid var(--line); }
.project-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.project-summary strong { font-size: 18px; margin-right: auto; }
.project-summary span {
    border-radius: 999px;
    background: #eef6ff;
    color: #1256cc;
    padding: 7px 10px;
    font-weight: 900;
}
.table-wrap.mini table { min-width: 520px; }
.table-wrap.mini th, .table-wrap.mini td { padding: 11px 14px; }
.empty-state { padding: 26px; color: var(--muted); font-weight: 800; }

#toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    max-width: 360px;
    padding: 13px 16px;
    border-radius: 13px;
    color: #fff;
    background: #122033;
    box-shadow: var(--shadow);
    transform: translateY(90px);
    opacity: 0;
    transition: .2s ease;
    z-index: 100;
}
#toast.show { transform: translateY(0); opacity: 1; }

.bottom-nav {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 45;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 45px rgba(18, 32, 51, .18);
    backdrop-filter: blur(12px);
}
.bottom-nav a {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 3px;
    color: #425572;
    text-decoration: none;
    font-size: 10px;
    font-weight: 900;
}
.bottom-nav svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.bottom-nav a.active {
    color: #fff;
}
.bottom-nav a.active svg {
    width: 46px;
    height: 46px;
    padding: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--pink));
    box-shadow: 0 10px 24px rgba(210, 46, 145, .28);
}
.bottom-nav a.active span { color: var(--red); }

.modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(18, 32, 51, .62);
}
.modal-box {
    width: min(720px, 100%);
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0,0,0,.32);
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 20px; }
.icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    color: #91a0b6;
    background: transparent;
    box-shadow: none;
    font-size: 22px;
}
.profile-form {
    display: grid;
    gap: 14px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #fffaf4, #ecf8ff);
}
.profile-form label {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 16px;
    color: #3b3d45;
    font-size: 16px;
    text-transform: none;
    font-weight: 900;
}
.profile-form label > input {
    grid-column: 2;
}
.profile-form button {
    justify-self: end;
}
.profile-form::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--line);
}
.profile-form::before,
.profile-form button {
    width: 100%;
}
.profile-form button {
    max-width: 170px;
    justify-self: end;
}

.invoice-link {
    padding: 8px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.invoice-body {
    min-height: 100vh;
    padding: 24px;
    background: #eaf2fb;
}
.invoice-toolbar {
    width: min(210mm, 100%);
    margin: 0 auto 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.invoice-sheet {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 16mm 13mm 12mm;
    color: #071833;
    background: #fff;
    box-shadow: 0 28px 80px rgba(18, 32, 51, .22);
}
.invoice-top {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr;
    align-items: start;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 2px solid #e2e9f3;
}
.invoice-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.invoice-logo-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #0693d2, #00235f);
    font-size: 24px;
    font-weight: 950;
}
.invoice-brand h1 {
    margin: 0;
    font-size: 30px;
    letter-spacing: 0;
}
.invoice-brand p {
    margin: 0;
    color: #65718a;
    letter-spacing: .34em;
    font-weight: 800;
}
.invoice-company {
    display: grid;
    gap: 4px;
    font-size: 12px;
}
.invoice-title-box {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 0 26px;
    padding: 16px 18px;
    color: #fff;
    background: linear-gradient(135deg, #08245a, #07519a 72%, #0eb4d2);
}
.invoice-title-box h2 {
    margin: 0 0 8px;
    font-size: 28px;
    letter-spacing: 0;
}
.invoice-title-box p,
.invoice-title-box span {
    display: block;
    margin: 0;
    font-weight: 800;
}
.invoice-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 20px 0;
}
.invoice-meta h3,
.invoice-block h3 {
    margin: 0 0 10px;
    color: #073c72;
    font-size: 14px;
    text-transform: uppercase;
}
.invoice-meta p { margin: 3px 0; color: #2e3c52; }
.invoice-meta dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px;
    margin: 0;
}
.invoice-meta dt { color: #55657c; }
.invoice-meta dd { margin: 0; font-weight: 800; }
.invoice-block { margin-top: 12px; }
.invoice-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 12px;
}
.invoice-table th {
    padding: 9px 10px;
    color: #fff;
    background: #05265a;
}
.invoice-table td {
    padding: 9px 10px;
    border: 1px solid #d9e2ef;
}
.invoice-table td:first-child,
.invoice-table th:first-child {
    text-align: center;
    width: 80px;
}
.invoice-table td:last-child,
.invoice-table th:last-child {
    text-align: right;
    width: 150px;
}
.invoice-table small {
    display: block;
    margin-top: 3px;
    color: #637089;
}
.invoice-total td {
    color: #063e85;
    background: #edf5ff;
    font-weight: 950;
    text-transform: uppercase;
}
.invoice-payment-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 22px;
    margin-top: 24px;
}
.paid-row td {
    color: #087c45;
    background: #e5faed;
    font-weight: 950;
    text-transform: uppercase;
}
.invoice-summary {
    display: grid;
    align-content: start;
    gap: 12px;
    margin-top: 28px;
}
.invoice-summary div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-radius: 12px;
    background: #f0f7ff;
    font-weight: 900;
}
.invoice-summary .due {
    display: grid;
    grid-template-columns: 1fr auto;
    color: #fff;
    background: #05265a;
}
.invoice-summary .due strong {
    font-size: 24px;
}
.invoice-summary .due small {
    grid-column: 1 / -1;
    color: rgba(255,255,255,.8);
}
.invoice-thanks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
    padding: 18px;
    border-radius: 12px;
    background: #f2f8ff;
}
.invoice-thanks h3 {
    margin: 0 0 6px;
    color: #073c72;
    font-size: 24px;
    font-style: italic;
}
.signature {
    text-align: center;
    border-left: 1px solid #d7e1ef;
}
.signature p { margin: 0 0 36px; font-weight: 900; }
.signature strong {
    display: inline-block;
    padding-top: 8px;
    border-top: 1px solid #8794aa;
}
.invoice-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 18px;
    padding: 14px;
    color: #fff;
    text-align: center;
    background: #05265a;
    font-size: 12px;
    font-weight: 800;
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #084a7c 0%, #0c827c 62%, #8b341a 100%);
}
.login-shell { width: min(430px, calc(100vw - 28px)); }
.login-panel {
    color: #fff;
    text-align: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 24px;
    padding: 42px 48px;
    background: linear-gradient(180deg, rgba(7,76,126,.8), rgba(15,130,119,.58), rgba(139,52,26,.65));
    box-shadow: 0 30px 80px rgba(0,0,0,.26);
}
.brand-mark {
    width: 92px;
    height: 66px;
    margin: 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #0e5d89;
    background: #fff;
    font-weight: 950;
    font-size: 28px;
}
.login-panel h1 { margin: 20px 0 8px; font-size: 32px; }
.login-panel p { color: rgba(255,255,255,.82); }
.login-form { display: grid; gap: 16px; margin-top: 24px; }
.login-form label { text-align: left; color: #fff; }
.login-form input { background: #eaf2ff; border-width: 3px; }
.login-form button { width: 100%; border-radius: 22px; }
.alert {
    background: #fff1f1;
    color: #9d2929;
    border: 1px solid #ffd2d2;
    border-radius: 12px;
    padding: 10px;
    margin: 14px 0;
}

@media (max-width: 1100px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 760px) {
    body { padding-bottom: 90px; }
    .hamburger { display: inline-grid; place-items: center; }
    .bottom-nav { display: grid; }
    .sidebar {
        transform: translateX(-105%);
        transition: .2s ease;
        box-shadow: 24px 0 50px rgba(0,0,0,.2);
    }
    .sidebar.open { transform: translateX(0); }
    .app { margin-left: 0; }
    .topbar {
        min-height: 62px;
        padding: 10px 16px;
    }
    .topbar-title { display: none; }
    .topbar-actions {
        width: 100%;
        justify-content: space-between;
    }
    .profile-area {
        min-width: 0;
        max-width: calc(100% - 58px);
    }
    .profile-chip {
        max-width: 100%;
        padding: 4px 8px 4px 4px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 12px 30px rgba(18, 32, 51, .08);
    }
    .profile-chip strong {
        display: block;
        min-width: 0;
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
    }
    .profile-chip span {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }
    .profile-menu {
        left: 0;
        right: auto;
        top: calc(100% + 10px);
        width: min(292px, calc(100vw - 32px));
        border-radius: 18px;
    }
    .page-shell { padding: 18px; }
    .hero-strip, .panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .stats { grid-template-columns: 1fr; }
    .stat { min-height: 116px; border-radius: 18px; }
    .form-grid { grid-template-columns: 1fr; }
    .panel h2 { font-size: 22px; }
    .project-summary { align-items: flex-start; flex-direction: column; }
    .project-summary strong { margin-right: 0; }
    .profile-form {
        gap: 12px;
    }
    .profile-form label {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .profile-form label > input {
        grid-column: 1;
    }
    .profile-form button {
        max-width: none;
        justify-self: stretch;
    }
    .invoice-body {
        padding: 10px;
    }
    .invoice-toolbar,
    .invoice-sheet {
        width: 100%;
    }
    .invoice-sheet {
        min-height: auto;
        padding: 18px;
    }
    .invoice-top,
    .invoice-meta,
    .invoice-payment-grid,
    .invoice-thanks,
    .invoice-footer {
        grid-template-columns: 1fr;
    }
    .signature {
        border-left: 0;
        border-top: 1px solid #d7e1ef;
        padding-top: 14px;
    }
    .invoice-table {
        font-size: 11px;
    }
}

@media print {
    @page {
        size: A4;
        margin: 0;
    }
    body.invoice-body {
        padding: 0;
        background: #fff;
    }
    .no-print {
        display: none !important;
    }
    .invoice-sheet {
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        box-shadow: none;
    }
}