* {
    box-sizing: border-box;
}

:root {
    --golden-orange: #ff7a00;
    --golden-orange-dark: #d85f00;
    --golden-blue: #0097c9;
    --golden-blue-dark: #075f86;
    --golden-blue-deep: #064b68;
    --golden-blue-soft: #edfaff;
    --golden-ink: #123449;
    --golden-border: #c8e6f3;
}

body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #f3fbff 0%, #ffffff 42%, #fff7ef 100%);
    color: var(--golden-ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

html,
body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

.shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.sidebar {
    min-width: 0;
    max-width: 100%;
    background: linear-gradient(180deg, var(--golden-blue-deep) 0%, var(--golden-blue-dark) 58%, #06435d 100%);
    color: #f8fafc;
    padding: 22px 18px;
}

.shell > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: var(--golden-orange);
    color: #fff;
    font-weight: 800;
}

.brand small,
.muted {
    color: #607d8f;
}

.muted {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.sidebar nav {
    display: grid;
    gap: 6px;
    margin-top: 22px;
}

.nav-link {
    padding: 11px 12px;
    border-radius: 8px;
    color: #e9f8ff;
}

.nav-link.active,
.nav-link:hover {
    background: rgba(255, 255, 255, .16);
    border-left: 3px solid var(--golden-orange);
    color: #fff;
}

.logout-form {
    margin-top: 24px;
}

.sidebar-meta {
    margin-top: 22px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .16);
    line-height: 1.5;
}

.button,
button,
.logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: var(--golden-orange);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.button.secondary {
    background: #fff;
    border: 1px solid var(--golden-border);
    color: var(--golden-blue-deep);
}

.button.danger,
.logout-button {
    background: var(--golden-blue-deep);
    color: #fff;
}

.button.success {
    background: var(--golden-blue);
    color: #fff;
}

.content {
    min-width: 0;
    max-width: 100%;
    padding: 24px;
}

.topbar {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.topbar h1,
.page-title {
    margin: 0;
    font-size: 25px;
}

.grid {
    display: grid;
    gap: 18px;
}

.grid > *,
.topbar,
.panel,
.stat,
.document,
.table-wrap {
    min-width: 0;
}

.grid.stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel,
.stat,
.login-panel,
.document {
    background: #fff;
    border: 1px solid var(--golden-border);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(0, 105, 150, .09);
}

.panel,
.document {
    padding: 18px;
}

.stat {
    padding: 18px;
}

.stat strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
}

.panel-header,
.form-header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 6px;
    -webkit-overflow-scrolling: touch;
}

.line-actions {
    width: 110px;
}

.line-remove {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
    font-size: 14px;
}

th,
td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
    line-height: 1.25;
}

th {
    background: var(--golden-blue-deep);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    overflow-wrap: normal;
}

.table-wrap td:last-child {
    width: 1%;
    white-space: nowrap;
}

.table-wrap td:last-child .actions {
    flex-wrap: nowrap;
    gap: 6px;
}

table .button,
table button {
    min-height: 30px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 12px;
}

.data-table .money,
.data-table .numeric,
.money,
.numeric {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.nowrap,
.date-cell,
.document-number {
    white-space: nowrap;
}

.document-number {
    font-weight: 800;
}

.table-actions {
    min-width: 190px;
}

.table-actions .actions,
.table-actions {
    white-space: nowrap;
}

.table-actions form {
    display: inline-flex;
}

.invoice-history-table {
    min-width: 1360px;
}

.invoice-history-table th:nth-child(1),
.invoice-history-table td:nth-child(1) {
    min-width: 120px;
}

.invoice-history-table th:nth-child(2),
.invoice-history-table td:nth-child(2) {
    min-width: 120px;
}

.invoice-history-table th:nth-child(6),
.invoice-history-table td:nth-child(6),
.invoice-history-table th:nth-child(7),
.invoice-history-table td:nth-child(7),
.invoice-history-table th:nth-child(8),
.invoice-history-table td:nth-child(8) {
    min-width: 112px;
}

.invoice-history-table th:nth-child(12),
.invoice-history-table td:nth-child(12) {
    min-width: 250px;
}

.products-table {
    min-width: 1260px;
}

.payments-table {
    min-width: 1460px;
}

.procurements-table {
    min-width: 960px;
}

.invoice-lines-table {
    min-width: 1180px;
}

.dashboard-table {
    min-width: 620px;
}

tbody tr:nth-child(even) {
    background: var(--golden-blue-soft);
}

.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e5e7eb;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.badge.ok {
    background: #dcfce7;
    color: #166534;
}

.badge.warning {
    background: #fff3e6;
    color: var(--golden-orange-dark);
}

.badge.info {
    background: #dff6ff;
    color: var(--golden-blue-deep);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
    display: grid;
    gap: 6px;
}

.field.full {
    grid-column: 1 / -1;
}

label {
    color: #374151;
    font-size: 13px;
    font-weight: 700;
}

.checkbox-line {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 40px;
}

.checkbox-line input {
    width: auto;
    min-height: auto;
}

.checkbox-line.compact {
    min-height: 28px;
}

input,
select,
textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--golden-border);
    border-radius: 6px;
    padding: 8px 10px;
    background: #fff;
    color: var(--golden-ink);
    font: inherit;
}

input[type="file"] {
    min-width: 0;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--golden-blue);
    box-shadow: 0 0 0 3px rgba(0, 151, 201, .16);
    outline: 0;
}

textarea {
    min-height: 90px;
    resize: vertical;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
}

.filters input,
.filters select {
    max-width: 260px;
}

.import-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin: 0 0 18px;
    padding: 12px;
    border: 1px solid var(--golden-border);
    border-radius: 8px;
    background: #f5fcff;
}

.import-form label {
    width: 100%;
}

.import-form input[type="file"] {
    max-width: 420px;
}

.year-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.year-form label {
    white-space: nowrap;
}

.year-form select {
    min-height: 40px;
    max-width: 150px;
}

.permission-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.company-settings {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 22px;
    align-items: start;
}

.company-logo-box {
    display: grid;
    gap: 10px;
}

.company-logo-box img,
.document-logo {
    max-width: 150px;
    max-height: 84px;
    object-fit: contain;
}

.logo-placeholder,
.document-logo-fallback {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    background: var(--golden-orange);
    color: #fff;
    font-size: 28px;
    font-weight: 900;
}

.payment-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.payment-summary > div {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.payment-summary span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.payment-summary strong {
    display: block;
    margin-top: 6px;
    font-size: 20px;
}

.balance-negative {
    color: var(--golden-orange-dark);
}

.balance-positive {
    color: #166534;
}

.balance-neutral {
    color: #607d8f;
}

.inline-edit {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 8px;
    min-width: 720px;
}

.alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 700;
}

.alert.success {
    background: #dcfce7;
    color: #166534;
}

.alert.warning,
.alert.error {
    background: #fff3e6;
    color: var(--golden-orange-dark);
}

.pagination {
    margin-top: 16px;
}

.login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    background: linear-gradient(135deg, var(--golden-blue-deep) 0 46%, var(--golden-orange) 46% 49%, #f3fbff 49%);
}

.login-panel {
    width: min(640px, calc(100vw - 32px));
    padding: 32px;
}

.login-title {
    margin: 0 0 26px;
    padding: 18px;
    border: 2px solid var(--golden-blue-deep);
    border-radius: 6px;
    background: #fff;
    font-size: 44px;
    text-align: center;
    letter-spacing: 0;
}

.company-title {
    color: var(--golden-orange);
    font-size: 24px;
    font-weight: 900;
}

.document-sheet {
    width: min(900px, 100%);
    min-height: 1120px;
    margin: 0 auto;
    padding: 34px 46px;
    background: #fff;
}

.document-print-header,
.document-print-body {
    width: 100%;
}

.document-brand {
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.brand-side {
    display: flex;
    justify-content: center;
}

.document-logo {
    width: 120px;
    max-height: 86px;
    object-fit: contain;
}

.brand-center {
    display: grid;
    gap: 5px;
}

.brand-center span {
    font-weight: 700;
}

.document-orange-line {
    height: 8px;
    margin: 18px auto 24px;
    border-radius: 4px;
    background: var(--golden-orange);
}

.document-date {
    margin: 0 0 52px auto;
    text-align: right;
}

.document-info-grid {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 24px;
    align-items: start;
    margin-bottom: 26px;
}

.document-left-info p {
    margin: 0 0 18px;
}

.document-client-box {
    min-height: 96px;
    padding: 0;
    border: 0;
}

.document-client-box div {
    min-height: 22px;
    padding: 2px 0;
}

.document-section-title {
    margin: 18px 0 8px;
    font-size: 15px;
    text-align: center;
}

.document-table-wrap {
    overflow: visible;
}

.document table {
    min-width: 0;
}

.document-table th,
.document-table td,
.document-summary th,
.document-summary td {
    border: 1px solid var(--golden-blue-deep);
    background: #fff;
    color: var(--golden-ink);
    text-transform: none;
}

.document-table th {
    background: #f0fbff;
    color: var(--golden-blue-deep);
    font-size: 13px;
}

.document-table td {
    min-height: 32px;
}

.document-table th:nth-child(1),
.document-table td:nth-child(1) {
    width: 90px;
}

.document-table th:nth-child(3),
.document-table td:nth-child(3) {
    width: 150px;
}

.document-table th:nth-child(4),
.document-table td:nth-child(4) {
    width: 150px;
}

.document-summary {
    max-width: 310px;
    margin: 36px 0 0 auto;
}

.document-summary th,
.document-summary td {
    padding: 9px;
}

.document-summary tr:last-child th,
.document-summary tr:last-child td {
    background: #fff3e6;
    color: var(--golden-blue-deep);
}

.amount-in-words {
    margin-top: 28px;
    line-height: 1.7;
}

.signature-area {
    display: grid;
    justify-items: center;
    width: 260px;
    min-height: 145px;
    margin: 22px 40px 0 auto;
    font-size: 18px;
}

.signature-images {
    position: relative;
    width: 210px;
    min-height: 110px;
}

.signature-images img {
    position: absolute;
    max-width: 190px;
    max-height: 115px;
    object-fit: contain;
}

.signature-images img:nth-child(1) {
    left: 0;
    top: 0;
}

.signature-images img:nth-child(2) {
    right: 0;
    top: 28px;
}

.document-footer {
    margin-top: 68px;
    color: #333;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.document-footer .document-orange-line {
    width: 380px;
    height: 5px;
    margin-bottom: 12px;
}

@media (max-width: 1180px) {
    .shell {
        grid-template-columns: 230px 1fr;
    }

    .grid.stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid.two {
        grid-template-columns: 1fr;
    }

    .content {
        padding: 20px;
    }
}

@media (max-width: 980px) {
    .shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        padding: 16px;
    }

    .brand {
        padding-bottom: 16px;
    }

    .sidebar nav {
        display: flex;
        gap: 8px;
        margin-top: 16px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sidebar nav::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .sidebar-meta {
        margin-top: 14px;
    }

    .grid.two,
    .company-settings,
    .payment-summary,
    .form-grid,
    .form-grid.three {
        grid-template-columns: 1fr;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .topbar .actions {
        width: 100%;
    }

    .year-form {
        flex-wrap: wrap;
    }

    .document-sheet {
        min-height: auto;
        padding: 24px;
    }

    .document-brand {
        grid-template-columns: 92px 1fr 92px;
        gap: 8px;
    }

    .document-logo {
        width: 82px;
        max-height: 64px;
    }

    .company-title {
        font-size: 20px;
    }

    .document-info-grid {
        grid-template-columns: minmax(0, 1fr) minmax(170px, 42%);
        gap: 14px;
    }

    .document-date {
        margin-bottom: 28px;
    }

    .document-client-box {
        justify-self: end;
        width: 100%;
        max-width: 260px;
    }

    .document-summary {
        max-width: none;
        width: 100%;
    }

    .signature-area {
        margin-right: 0;
    }
}

@media (max-width: 720px) {
    body {
        font-size: 14px;
    }

    .content {
        padding: 14px;
    }

    .sidebar {
        padding: 14px;
    }

    .sidebar nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        padding-bottom: 0;
    }

    .nav-link {
        display: flex;
        min-height: 42px;
        align-items: center;
        white-space: normal;
        line-height: 1.2;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
    }

    .grid.stats {
        grid-template-columns: 1fr;
    }

    .topbar h1,
    .page-title {
        font-size: 22px;
    }

    .panel,
    .document,
    .stat {
        padding: 14px;
    }

    .panel-header,
    .form-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .panel-header .actions,
    .form-header .actions {
        width: 100%;
    }

    .actions {
        gap: 8px;
    }

    .button,
    button,
    .logout-button {
        min-height: 34px;
        padding: 0 10px;
        font-size: 13px;
    }

    .filters {
        display: grid;
        grid-template-columns: 1fr;
    }

    .filters input,
    .filters select,
    .filters .button,
    .filters button {
        max-width: none;
        width: 100%;
    }

    .import-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .import-form input[type="file"] {
        max-width: none;
        width: 100%;
    }

    .year-form,
    .year-form select,
    .topbar .actions > a {
        width: 100%;
        max-width: none;
    }

    .login-panel {
        width: min(640px, calc(100vw - 20px));
        padding: 18px;
    }

    .login-title {
        margin-bottom: 18px;
        padding: 14px 10px;
        font-size: 30px;
    }

    .login-panel .actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .login-panel button {
        width: 100%;
    }

    .inline-edit {
        min-width: 0;
        grid-template-columns: 1fr;
    }

    table {
        font-size: 13px;
    }

    th,
    td {
        padding: 7px 8px;
    }

    table .button,
    table button {
        min-height: 28px;
        padding: 0 7px;
        font-size: 11px;
    }

    .table-wrap td:last-child .actions {
        gap: 4px;
    }

    .document-sheet {
        padding: 16px;
    }

    .document-brand {
        grid-template-columns: 64px 1fr 64px;
    }

    .document-logo {
        width: 58px;
        max-height: 48px;
    }

    .company-title {
        font-size: 16px;
    }

    .brand-center span {
        font-size: 12px;
    }

    .document-orange-line {
        height: 6px;
        margin: 14px auto 18px;
    }

    .document-info-grid {
        grid-template-columns: minmax(0, 1fr) minmax(128px, 44%);
        gap: 8px;
    }

    .document-left-info p {
        margin-bottom: 12px;
    }

    .document-client-box {
        max-width: 190px;
        font-size: 14px;
    }

    .document-client-box div {
        min-height: 0;
    }

    .document-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .document-table {
        min-width: 640px;
    }

    .document-summary {
        min-width: 0;
    }

    .amount-in-words {
        margin-top: 22px;
    }

    .signature-area {
        width: 100%;
        justify-items: end;
        font-size: 16px;
    }

    .signature-images {
        width: 180px;
    }

    .signature-images img {
        max-width: 160px;
    }

    .document-footer .document-orange-line {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .content {
        padding: 10px;
    }

    .sidebar {
        padding: 12px 10px;
    }

    .login-title {
        font-size: 24px;
    }

    .panel,
    .document,
    .stat {
        border-radius: 6px;
        padding: 12px;
    }

    .document-brand {
        grid-template-columns: 48px 1fr 48px;
    }

    .document-logo {
        width: 44px;
        max-height: 38px;
    }

    .company-title {
        font-size: 14px;
    }

    .brand-center span {
        font-size: 11px;
    }

    .document-info-grid {
        grid-template-columns: minmax(0, 1fr) minmax(112px, 45%);
    }

    .document-client-box {
        max-width: 160px;
        font-size: 13px;
    }
}

@media print {
    @page {
        size: A4;
        margin: 40mm 14mm 32mm;
    }

    html,
    body {
        background: #fff;
        margin: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sidebar,
    .topbar,
    .no-print {
        display: none !important;
    }

    .shell {
        display: block;
    }

    .content {
        padding: 0;
    }

    .document {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .document-sheet {
        width: 100%;
        min-height: auto;
        padding: 0;
    }

    .document-print-header {
        position: fixed;
        top: -34mm;
        right: 0;
        left: 0;
        z-index: 10;
        background: #fff;
    }

    .document-print-header .document-orange-line {
        height: 5px;
        margin: 7mm auto 0;
    }

    .document-print-body {
        position: relative;
        z-index: 1;
    }

    .document-date {
        margin-bottom: 34px;
    }

    .document-info-grid {
        margin-bottom: 22px;
    }

    .document-table-wrap {
        overflow: visible;
    }

    .document-table {
        page-break-inside: auto;
    }

    .document-brand,
    .document-info-grid,
    .document-summary,
    .signature-area {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .document-table thead {
        display: table-header-group;
    }

    .document-table tr,
    .document-summary tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .document-footer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        margin: 0;
        background: #fff;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .document-footer .document-orange-line {
        width: 65%;
        height: 4px;
        margin: 0 auto 8px;
    }

    .amount-in-words,
    .document-summary,
    .signature-area {
        page-break-inside: avoid;
    }
}