/* ============================================================
   CHIFRANDO INVOICE - LIVE PREVIEW + APP LOGO
   Version: 0.0.29
   ============================================================ */


/* ============================================================
   APP LOGO

   Replaces the old "C" icon in the sidebar and drawer
   with the logo you uploaded.
   ============================================================ */

.logo-mark {

    overflow: hidden !important;

    border-radius: 50% !important;

    background-color: transparent !important;

    background-image:
        url('../assets/chifrando-invoice-logo.png') !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        cover !important;

    color:
        transparent !important;

    font-size:
        0 !important;

}


/* ============================================================
   MAIN PAGE HEADER LOGO

   Also puts your logo beside Dashboard / Invoices /
   Create Invoice / Settings title.
   ============================================================ */

.top-title > div {

    min-height:
        32px;

    padding-left:
        40px;

    background-image:
        url('../assets/chifrando-invoice-logo.png');

    background-repeat:
        no-repeat;

    background-position:
        left center;

    background-size:
        30px 30px;

}


/* ============================================================
   LIVE PREVIEW

   Completely disable old full-size invoice scaling.
   ============================================================ */

#cf-live-preview-shell {

    position:
        relative !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    overflow:
        visible !important;

    padding:
        0 !important;

    background:
        transparent !important;

}


/* ============================================================
   SAME TEMPLATE PREVIEW
   ============================================================ */

#preview.cf-template-preview {

    position:
        relative !important;

    top:
        auto !important;

    left:
        auto !important;

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    transform:
        none !important;

    transform-origin:
        initial !important;

    overflow:
        visible !important;

    will-change:
        auto !important;

}


/* ============================================================
   TEMPLATE PAPER

   Same paper sizing as Invoice Templates.
   ============================================================ */

#preview.cf-template-preview
.cf-template-paper {

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    transform:
        none !important;

}


/* ============================================================
   REMOVE OLD LIVE-STAGE BEHAVIOUR
   ============================================================ */

.cf-live-preview-card
#preview.cf-template-preview
.preview,

.cf-live-preview-card
#preview.cf-template-preview
.invoice-head,

.cf-live-preview-card
#preview.cf-template-preview
.invoice-table {

    width:
        auto;

    min-width:
        0;

    max-width:
        100%;

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 800px) {

    #cf-live-preview-shell {

        min-height:
            0 !important;

    }


    #preview.cf-template-preview {

        padding:
            12px;

    }


    #preview.cf-template-preview
    .cf-template-paper {

        padding:
            18px;

    }

}


@media (max-width: 480px) {

    #preview.cf-template-preview {

        padding:
            9px;

    }


    #preview.cf-template-preview
    .cf-template-paper {

        padding:
            15px;

    }


    /*
       Professional template normally uses
       negative 24px margins.

       Adjust it to the smaller mobile paper.
    */

    #preview.cf-template-preview-professional
    .cf-mini-invoice-head {

        margin:
            -15px
            -15px
            14px;

        padding:
            16px
            15px;

    }

}


/* ============================================================
   PRINT
   ============================================================ */

@media print {

    .cf-live-preview-card {

        display:
            none !important;

    }

}