/* ==========================================================================
   Nexora — Distribution Management System — "Deep Violet" theme
   Mobile-first. Every screen in every Area is built from the tokens and
   components in this file; don't introduce per-page colour values.
   ========================================================================== */

:root {
    /* Brand palette */
    --sd-purple: #6D28D9;
    --sd-purple-deep: #4C1D95;
    --sd-purple-dark: #3B1578;
    --sd-lavender: #F5F3FB;
    --sd-magenta: #D946EF;
    --sd-ink: #1E1B2E;
    --sd-mauve: #8B8698;

    /* Semantic status — deliberately outside the purple palette */
    --sd-paid: #16A34A;
    --sd-partial: #F59E0B;
    --sd-unpaid: #DC2626;

    --sd-surface: #FFFFFF;
    --sd-border: #E7E3F1;

    --sd-radius: 14px;
    --sd-radius-sm: 9px;
    --sd-shadow: 0 2px 8px rgba(76, 29, 149, .08), 0 1px 2px rgba(76, 29, 149, .06);
    --sd-shadow-lg: 0 8px 24px rgba(76, 29, 149, .12);

    /* 44px is the accessibility floor for a touch target (WCAG 2.5.5 / Apple
       HIG). The layout is compact, but nothing interactive goes below this. */
    --sd-tap: 44px;
    --sd-tap-sm: 36px;

    /* Spacing scale — every gap in the app comes from these three. Sized so a
       phone still fits a useful amount on screen while leaving each block
       enough breathing room to read as a separate thing. */
    --sd-gap-xs: .4rem;
    --sd-gap: .625rem;
    --sd-gap-lg: 1rem;

    /* Padding inside a surface (card, tile, modal). Grows on wider screens. */
    --sd-pad: .9rem;

    --sd-font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sd-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* A tablet or desktop has the room to breathe; only phones need to be frugal. */
@media (min-width: 576px) {
    :root { --sd-pad: 1.125rem; }
}

/* --------------------------------------------------------------- base type */

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sd-font-body);
    background-color: var(--sd-lavender);
    color: var(--sd-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.sd-heading {
    font-family: var(--sd-font-heading);
    font-weight: 600;
    color: var(--sd-ink);
    letter-spacing: -.01em;
}

/* Page headings were shouting on a phone — a 24px h1 above 13px body text is
   more contrast than a screen this narrow needs. They step back up once
   there's width to carry them. */
h1 { font-size: 1.1875rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: .9375rem; }

@media (min-width: 576px) {
    h1 { font-size: 1.375rem; }
    h2 { font-size: 1.1875rem; }
    h3 { font-size: 1.0625rem; }
}

a {
    color: var(--sd-purple);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--sd-purple-deep);
    text-decoration: underline;
}

.sd-muted {
    color: var(--sd-mauve);
}

/* Money columns must line up in ledgers and reports. */
.sd-money,
.sd-amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: left;
    white-space: nowrap;
}

/* ------------------------------------------------------------- app chrome  */

.sd-appbar {
    background: linear-gradient(135deg, var(--sd-purple-deep) 0%, var(--sd-purple) 100%);
    color: #fff;
    padding: .5rem .75rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 10px rgba(60, 20, 120, .25);
}

.sd-appbar a,
.sd-appbar .sd-appbar-title {
    color: #fff;
}

.sd-appbar-title {
    font-family: var(--sd-font-heading);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.2;
    margin: 0;
}

.sd-appbar-sub {
    font-size: .75rem;
    opacity: .78;
    line-height: 1.2;
}

.sd-appbar-btn {
    min-width: var(--sd-tap);
    min-height: var(--sd-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sd-radius-sm);
    background: rgba(255, 255, 255, .12);
    border: 0;
    color: #fff;
    font-size: 1.125rem;
}

.sd-appbar-btn:hover,
.sd-appbar-btn:focus {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    text-decoration: none;
}

/* Brand mark in the app bar. Solid white rather than the translucent wash
   the buttons use: the mark's outer strokes are near-black violet and lose
   all definition against the purple gradient without it. */
.sd-appbar-logo {
    min-width: var(--sd-tap);
    min-height: var(--sd-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sd-radius-sm);
    background: #fff;
    flex: 0 0 auto;
}

.sd-appbar-logo img {
    width: 32px;
    height: 32px;
    display: block;
}

.sd-main {
    flex: 1 0 auto;
    padding: var(--sd-gap-lg) .875rem;
    padding-bottom: 1.5rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .sd-main { padding: 1.125rem 1.25rem 2rem; }
}

.sd-footer {
    flex-shrink: 0;
    padding: .75rem .5rem;
    text-align: center;
    font-size: .6875rem;
    color: var(--sd-mauve);
}

/* --------------------------------------------------------------- density
   Bootstrap's spacing utilities are fixed rem values, so rather than editing
   every view we adjust the handful we actually use. These sit a little below
   Bootstrap's defaults — enough to keep a form on one screen, not so tight
   that fields run together. Scoped to .sd-main so modals and the login page
   keep Bootstrap's defaults. */

.sd-main .mb-1 { margin-bottom: .25rem !important; }
.sd-main .mb-2 { margin-bottom: .5rem !important; }
.sd-main .mb-3 { margin-bottom: .875rem !important; }
.sd-main .mb-4 { margin-bottom: 1.25rem !important; }
.sd-main .mt-2 { margin-top: .5rem !important; }
.sd-main .mt-3 { margin-top: .875rem !important; }
.sd-main .my-3 { margin-top: .875rem !important; margin-bottom: .875rem !important; }
.sd-main .p-4 { padding: var(--sd-pad) !important; }

/* --------------------------------------------------------------- the tiles */

.sd-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sd-gap);
}

@media (min-width: 576px) {
    .sd-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .sd-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sd-tile {
    background: var(--sd-surface);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    border: 1px solid transparent;
    padding: 1rem .625rem;
    min-height: 104px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .4rem;
    color: var(--sd-ink);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    -webkit-tap-highlight-color: transparent;
}

.sd-tile:hover,
.sd-tile:focus {
    text-decoration: none;
    color: var(--sd-ink);
    box-shadow: var(--sd-shadow-lg);
    border-color: var(--sd-border);
}

/* Visibly darker pressed state — important feedback on touch devices */
.sd-tile:active {
    transform: scale(.97);
    background-color: #EFEAFA;
    box-shadow: inset 0 2px 6px rgba(76, 29, 149, .14);
}

.sd-tile-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--sd-purple);
}

.sd-tile-label {
    font-family: var(--sd-font-heading);
    font-weight: 600;
    font-size: .8125rem;
    line-height: 1.3;
}

.sd-tile-meta {
    font-size: .6875rem;
    color: var(--sd-mauve);
    line-height: 1.2;
}

/* The ONE primary call-to-action per screen. */
.sd-tile-cta {
    background: linear-gradient(135deg, var(--sd-magenta) 0%, #C026D3 100%);
    color: #fff;
    border-color: transparent;
}

.sd-tile-cta:hover,
.sd-tile-cta:focus,
.sd-tile-cta .sd-tile-icon,
.sd-tile-cta .sd-tile-meta {
    color: #fff;
}

.sd-tile-cta:active {
    background: linear-gradient(135deg, #C026D3 0%, #A21CAF 100%);
}

.sd-tile-wide {
    grid-column: span 2;
    min-height: 82px;
}

/* A wide tile has room to put the icon beside the label instead of above it. */
.sd-tile-wide .sd-tile {
    flex-direction: row;
    gap: .625rem;
    flex-wrap: wrap;
}

.sd-tile-wrap {
    position: relative;
    display: block;
    height: 100%;
}

.sd-tile-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: var(--sd-unpaid);
    color: #fff;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    padding: .1rem .4rem;
    min-width: 1.25rem;
    text-align: center;
    z-index: 2;
}

/* ------------------------------------------- the signature: status pills */

.sd-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 999px;
    font-family: var(--sd-font-body);
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .7rem;
    line-height: 1.4;
    white-space: nowrap;
}

.sd-pill::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Colour is always paired with the text label, never used alone. */
.sd-pill-paid {
    background: #DCFCE7;
    color: #15803D;
}

.sd-pill-partial {
    background: #FEF3C7;
    color: #B45309;
}

.sd-pill-unpaid {
    background: #FEE2E2;
    color: #B91C1C;
}

.sd-pill-cancelled {
    background: #EEECF3;
    color: #6B6579;
}

.sd-pill-neutral {
    background: #EDE9FE;
    color: var(--sd-purple-deep);
}

/* -------------------------------------------------------------- cards/lists */

.sd-card {
    background: var(--sd-surface);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    border: 1px solid var(--sd-border);
    padding: var(--sd-pad);
    margin-bottom: var(--sd-gap);
}

.sd-card:last-child {
    margin-bottom: 0;
}

.sd-card-link {
    display: block;
    color: inherit;
}

.sd-card-link:hover,
.sd-card-link:focus {
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sd-shadow-lg);
}

.sd-card-link:active {
    background-color: #FAF9FE;
}

.sd-card-title {
    font-family: var(--sd-font-heading);
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.3;
    margin: 0;
}

.sd-section-title {
    font-family: var(--sd-font-heading);
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sd-mauve);
    /* Asymmetric on purpose: the gap above separates it from the previous
       block, the smaller gap below ties it to what it labels. */
    margin: 1.25rem 0 .5rem;
}

.sd-section-title:first-child {
    margin-top: 0;
}

/* Big summary numbers at the top of dashboards and reports */
.sd-stat {
    background: var(--sd-surface);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    padding: .75rem .5rem;
    text-align: center;
    height: 100%;
}

.sd-stat-value {
    font-family: var(--sd-font-heading);
    font-weight: 700;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    color: var(--sd-purple-deep);
    line-height: 1.25;
    word-break: break-word;
}

.sd-stat-label {
    font-size: .6875rem;
    color: var(--sd-mauve);
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.3;
    margin-top: .15rem;
}

/* ------------------------------------------------------------ forms/buttons */

.form-label {
    font-weight: 500;
    font-size: .8125rem;
    margin-bottom: .3rem;
    color: var(--sd-ink);
    line-height: 1.3;
}

.form-control,
.form-select {
    min-height: var(--sd-tap);
    border-radius: var(--sd-radius-sm);
    border: 1px solid var(--sd-border);
    /* Must stay at 16px: anything smaller makes iOS zoom the page on focus. */
    font-size: 1rem;
    padding: .5rem .75rem;
    line-height: 1.4;
}

textarea.form-control {
    min-height: 0;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sd-purple);
    box-shadow: 0 0 0 .18rem rgba(109, 40, 217, .15);
}

.input-group-text {
    padding: .5rem .7rem;
    background: #F7F5FC;
    border-color: var(--sd-border);
    font-size: .875rem;
}

/* Help text and errors need to sit clear of the field they belong to. */
.form-text,
.field-validation-error {
    display: block;
    margin-top: .25rem;
    line-height: 1.35;
}

.form-check {
    min-height: auto;
    margin-bottom: 0;
}

.form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .12rem;
}

.form-check-input:checked {
    background-color: var(--sd-purple);
    border-color: var(--sd-purple);
}

.btn {
    min-height: var(--sd-tap);
    border-radius: var(--sd-radius-sm);
    font-family: var(--sd-font-heading);
    font-weight: 600;
    font-size: .875rem;
    padding: .5rem 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    line-height: 1.25;
}

/* Row-level actions on a card: smaller, but still a 36px target. */
.btn-sm {
    min-height: var(--sd-tap-sm);
    font-size: .78125rem;
    padding: .35rem .75rem;
    border-radius: 8px;
    gap: .3rem;
}

.btn-primary {
    background-color: var(--sd-purple);
    border-color: var(--sd-purple);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--sd-purple-deep);
    border-color: var(--sd-purple-deep);
}

.btn-primary:active,
.btn-primary:disabled {
    background-color: var(--sd-purple-dark);
    border-color: var(--sd-purple-dark);
}

/* Accent Magenta is reserved for the single primary CTA on a screen. */
.btn-cta {
    background-color: var(--sd-magenta);
    border-color: var(--sd-magenta);
    color: #fff;
}

.btn-cta:hover,
.btn-cta:focus,
.btn-cta:active {
    background-color: #C026D3;
    border-color: #C026D3;
    color: #fff;
}

/* WhatsApp — the one place a non-brand colour is allowed, because users
   recognise the app by its green and it must not read as a status colour. */
.btn-whatsapp {
    background-color: #25D366;
    border-color: #25D366;
    color: #fff;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus,
.btn-whatsapp:active {
    background-color: #1DA851;
    border-color: #1DA851;
    color: #fff;
}

.btn-outline-primary {
    color: var(--sd-purple);
    border-color: var(--sd-purple);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--sd-purple);
    border-color: var(--sd-purple);
    color: #fff;
}

.btn-block-mobile {
    width: 100%;
}

@media (min-width: 576px) {
    .btn-block-mobile { width: auto; }
}

/* ---------------------------------------------------------------- tab pills */

/* Left alone, Bootstrap paints nav-pills in its own blue. Rendered as a
   segmented control so the unselected tabs read as one group rather than as
   three separate buttons competing with the screen's real actions. */
.nav-pills {
    gap: var(--sd-gap-xs);
    padding: .25rem;
    background-color: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
}

.nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--sd-tap-sm);
    padding: .4rem .75rem;
    border-radius: var(--sd-radius-sm);
    font-family: var(--sd-font-heading);
    font-weight: 600;
    font-size: .8125rem;
    color: var(--sd-mauve);
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    background-color: var(--sd-lavender);
    color: var(--sd-purple);
}

/* Listed after :hover deliberately — equal specificity, so the selected tab
   keeps its purple when the pointer passes over it. */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
    background-color: var(--sd-purple);
    color: #fff;
}

.nav-pills .nav-link:focus-visible {
    outline: 2px solid var(--sd-purple);
    outline-offset: 1px;
    box-shadow: none;
}

.form-text,
.text-muted {
    color: var(--sd-mauve) !important;
    font-size: .8125rem;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

.field-validation-error,
.text-danger {
    color: var(--sd-unpaid) !important;
    font-size: .8125rem;
}

.input-validation-error {
    border-color: var(--sd-unpaid) !important;
}

/* ------------------------------------------------------------------ tables */

.sd-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--sd-radius);
    background: var(--sd-surface);
    box-shadow: var(--sd-shadow);
}

.table {
    margin-bottom: 0;
    font-size: .875rem;
}

.table > thead {
    background: #F3F0FB;
}

.table > thead th {
    font-family: var(--sd-font-heading);
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--sd-purple-deep);
    border-bottom: 1px solid var(--sd-border);
    white-space: nowrap;
}

.table > tbody td {
    vertical-align: middle;
    border-color: #F1EEF9;
    padding: .55rem .7rem;
}

.table > thead th {
    padding: .5rem .7rem;
}

/* ------------------------------------------------------------ the ledger
   A statement has five columns (date, detail, debit, credit, balance) which
   cannot fit a phone without either a horizontal scroll or unreadable text.
   So on mobile each entry becomes a row-card instead of a table row, and the
   real table only appears from 768px up. */

.sd-ledger-entry {
    background: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-left: 3px solid var(--sd-border);
    border-radius: var(--sd-radius-sm);
    padding: .65rem .75rem;
    margin-bottom: .5rem;
}

/* The left edge carries the meaning: money out vs money in. */
.sd-ledger-entry.is-debit { border-left-color: var(--sd-purple); }
.sd-ledger-entry.is-credit { border-left-color: var(--sd-paid); }
.sd-ledger-entry.is-cancelled { border-left-color: #CFC7E6; opacity: .65; }

.sd-ledger-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.sd-ledger-date {
    font-size: .6875rem;
    color: var(--sd-mauve);
    white-space: nowrap;
}

.sd-ledger-desc {
    font-size: .8125rem;
    line-height: 1.4;
    margin-top: .2rem;
}

.sd-ledger-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
}

.sd-ledger-amount.is-debit { color: var(--sd-ink); }
.sd-ledger-amount.is-credit { color: var(--sd-paid); }

.sd-ledger-balance {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px dashed var(--sd-border);
    font-size: .6875rem;
    color: var(--sd-mauve);
}

.sd-ledger-balance strong {
    font-variant-numeric: tabular-nums;
    font-size: .8125rem;
    color: var(--sd-ink);
}

/* Opening / closing markers bookending the statement. */
.sd-ledger-marker {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: #F3F0FB;
    border-radius: var(--sd-radius-sm);
    padding: .6rem .75rem;
    margin-bottom: .5rem;
    font-size: .78125rem;
    font-weight: 600;
    color: var(--sd-purple-deep);
}

.sd-ledger-marker .sd-money {
    font-size: .775rem;
}

@media (min-width: 768px) {
    .sd-ledger-cards { display: none; }
    .sd-ledger-table { display: block; }
}

@media (max-width: 767.98px) {
    .sd-ledger-cards { display: block; }
    .sd-ledger-table { display: none; }
}

/* ----------------------------------------------- empty/loading/alert states */

.sd-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--sd-mauve);
    font-size: .875rem;
}

.sd-empty-icon {
    font-size: 1.75rem;
    color: #CFC7E6;
    margin-bottom: .4rem;
}

.sd-alert {
    border-radius: var(--sd-radius-sm);
    border: 0;
    font-size: .8125rem;
    padding: .65rem .8rem;
    line-height: 1.4;
}

/* Modals: match the card language rather than Bootstrap's default chrome. */
.modal-content {
    border: 0;
    border-radius: var(--sd-radius);
    box-shadow: 0 12px 40px rgba(30, 12, 70, .3);
}

.modal-header {
    border-bottom: 1px solid var(--sd-border);
    padding: .9rem 1.1rem;
}

.modal-title {
    font-family: var(--sd-font-heading);
    font-weight: 600;
    font-size: 1rem;
}

.modal-body {
    padding: 1.1rem;
}

.modal-footer {
    border-top: 0;
    padding: .25rem 1.1rem 1.1rem;
    gap: .5rem;
}

.sd-alert-success { background: #DCFCE7; color: #15803D; }
.sd-alert-error   { background: #FEE2E2; color: #B91C1C; }
.sd-alert-info    { background: #EDE9FE; color: var(--sd-purple-deep); }

.sd-spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 27, 46, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* --------------------------------------------------------------- login page */

.sd-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: linear-gradient(160deg, var(--sd-purple-deep) 0%, var(--sd-purple) 55%, #7C3AED 100%);
}

.sd-login-card {
    background: var(--sd-surface);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(30, 12, 70, .35);
    padding: 1.75rem 1.5rem;
    width: 100%;
    max-width: 400px;
}

/* The logo lockup is the page's h1 — no separate text heading. */
.sd-login-brand {
    margin: 0 auto .75rem;
    text-align: center;
    line-height: 0;
}

.sd-login-brand img {
    width: 200px;
    max-width: 62%;
    height: auto;
}

/* ----------------------------------------------------------------- utility */

.sd-sticky-actions {
    position: sticky;
    bottom: 0;
    background: var(--sd-lavender);
    padding: .75rem 0 .5rem;
    border-top: 1px solid var(--sd-border);
    z-index: 10;
}

/* Horizontally scrolling action strip, so a row of buttons never wraps into
   a second line and doubles a card's height. */
.sd-actions {
    display: flex;
    gap: .4rem;
    margin-top: .75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px;
}

.sd-actions::-webkit-scrollbar {
    display: none;
}

.sd-actions > * {
    flex: 0 0 auto;
}

/* Icon-only action button — used where the label is obvious from context. */
.sd-icon-btn {
    min-width: var(--sd-tap-sm);
    padding-left: .5rem;
    padding-right: .5rem;
}

@media print {
    .sd-appbar, .sd-footer, .sd-no-print { display: none !important; }
    body { background: #fff; }
}