/**
 *  MyHome Custom Stylesheet
 *  
 *  Update this stylesheet to replace the default
 *  logos, colours, theming etc. for MyHome.
*/


/* You can remove this line if you don't want to use the default fonts: */
@font-face {
    font-family: 'Degular Bold';
    src: url('./assets/Degular-Bold.woff');
}
@font-face {
    font-family: 'Degular Semibold';
    src: url('./assets/Degular-Semibold.woff');
}

html body {
    /* Colour Variables (R, G, B) */

    /* Main theme colour for nav bar, icons, action buttons, links, highlights etc. */
    --primary: 56, 54, 55;
    --primary-contrast: 255, 255, 255;

     /* Secondary colour for smaller highlights */
    --accent: 232, 90, 53;
    --accent-contrast: 255, 255, 255;

    /* Colour for basic actions and minor buttons */
    --default: 230, 233, 237;
    --default-contrast: 0, 0, 0;

    /* Colour used for Success Messages, loading bars/spinners, and Approve, Confirm, Save etc. actions */
    --save: 27, 37, 32;
    --save-contrast: 255, 255, 255;

    /* Colour used for Error Messages, and Reject, Delete, etc. actions */
    --delete: 194, 38, 28;
    --delete-contrast: 255, 255, 255;

    --done: 27, 37, 32; /* Highlight colour for completed tasks, icons, etc. */
    --incomplete: 188, 190, 192; /* Highlight colour for incomplete tasks, icons, etc. */

    --shadow: 0, 0, 0; /* Colour used for shadows, usually black. You can set this to a single 0 to remove shadows altogether. */

    /* Background/Foreground Colours */
    --ch-bg: 255, 255, 255; /* Lightest background colour, usually white */
    --ch-bg-1: 244, 246, 251;
    --ch-bg-2: 248, 246, 246;
    --ch-bg-3: 227, 230, 236;
    --ch-bg-4: 197, 200, 206; /* Darkest background colour */
    --ch-fg: 0, 0, 0; /* Darkest text colour, usually black */
    --ch-fg-1: 75, 75, 75;
    --ch-fg-2: 120, 130, 140;
    --ch-fg-3: 160, 170, 180; /* Lightest text colour */

    /* Appointment Calender Event Colours*/
    --appointment-confirmed: 10, 90, 159;  
    --appointment-pending: 165, 165, 165;
    --appointment-alternate: 158, 214, 237; /* Alternate Time proposed */
    --appointment-complete: 73, 183, 65; /* Appointment has already occurred */

    /* Font Variables - uncomment to override */
    --font-headers: 'Degular Bold', arial, sans-serif;
    --font-default: 'Degular Semibold', arial, sans-serif;

    /* Default Logo & Splash Image - uncomment to use */
    --splash-url: url('./assets/APlaceSplash.jpg');
    --logo-url: url('./assets/Aplace_Logo_FA_Orange.png');

    /* Miscellaneous Variables */
    --border-radius: 4px; /* How rounded buttons, lists, divs etc. should typically be. 0px = hard square */
}

html.theme-dark body {
    --primary: 57, 111, 159;
    --primary-contrast: 255, 255, 255;

    --accent: 174, 153, 70;
    --accent-contrast: 0, 0, 0;

    --default: 27, 28, 53;
    --default-contrast: 255, 255, 255;

    --save: 70, 165, 100; 
    --save-contrast: 255, 255, 255;
    
    --delete: 195, 78, 70;
    --delete-contrast: 255, 255, 255;

    --done: 69, 187, 104;
    --incomplete: 230, 203, 92;

    --ch-bg: 45, 45, 60;
    --ch-bg-1: 35, 35, 65;
    --ch-bg-2: 25, 25, 55;
    --ch-bg-3: 20, 20, 50;
    --ch-bg-4: 15, 15, 45;
    --ch-fg: 221, 221, 221;
    --ch-fg-1: 201, 201, 201;
    --ch-fg-2: 181, 181, 181;
    --ch-fg-3: 161, 161, 180;

    /* --logo-url: url('your logo url here'); */ /* logo url, should blend nicely on black background */
}

/* Login screen customisation */
body.myhome > main.login {
    background-position: center 80%;
}

/* Logo resizing */
a.logo > img {
    max-height: 40px !important;
}

/* Dashboard customisation */
html body.myhome > main > div.dashboard > .dashboard-grid .dashboard-tile.contact {
    display: none !important;
}

@media screen and (min-width: 1301px) {
    html body.myhome > main > div.dashboard > .dashboard-grid {
        grid:
            "progress photos" 2fr
            "docs photos" 2fr / 1fr 2fr !important;
    }
}
@media screen and (max-width: 1300px) {
    html body.myhome > main > div.dashboard > .dashboard-grid {
        grid:
            "progress progress" max-content
            "notes notes" max-content
            "photos docs" max-content/1fr 1fr !important;
    }
}
@media screen and (max-width: 800px) {
    html body.myhome > main > div.dashboard > .dashboard-grid {
        grid:
            "progress" max-content
            "notes" max-content
            "photos" max-content
            "docs" max-content !important;
    }
}

/**
 * Remove Appointments Dashboard Tile
 * - Restore once it's to be restored
 * - Remember to restore config for nav menu
 */

html body.myhome > main > div.dashboard > .dashboard-grid .dashboard-tile.appointments {
    display: none;
}

/* Hide Notes tile */
html body.myhome > main > div.dashboard > .dashboard-grid .dashboard-tile.notes {
    display: none;
}

/* Hide Percentages in Timeline */
myhome-timeline formcontrol[name="jobType"] button h5 {
    display: none !important;
}


html body.myhome {
    background-color: rgba(56,54,55);
}

/* Background of panel on login screen */
html body.myhome > main.login .content, html body.myhome > main.resetpassword .content {
    background-color: rgba(232, 90, 53,1);
}

/* Increase spacing between logo and fields in login screen */
html body.myhome > main.login .content .logo, html body.myhome > main.resetpassword .content .logo {
    margin-bottom: 2em;
}

/* Remove "Sign In" on login screen */
html body.myhome > main.login .content > div.dialog > myhome-login h1 {
    display: none;
}

html body.myhome > main.login .content .logo img, html body.myhome > main.resetpassword .content .logo img {
    content: url('./assets/Aplace_Logo_FA_White.png');
}

/* Hide the Contract Stage icons/links in the Progress tile */
html body.myhome > main > div.dashboard > div.dashboard-grid > .dashboard-tile.progress > div.content > myhome-progress > div > div > div.stages {
    display: none;
}

/* Restyle the H5 to H3 in the Progress Tile */
html body.myhome > main > div.dashboard > div.dashboard-grid > div.dashboard-tile.progress > div.content > myhome-progress > div > div > div.stories h5 {
    font-size: 1.17em;   /* same as h3 */
    font-weight: bold;
    margin: 1em 0;
    text-transform: uppercase;
    padding-left: 6px;
}

/* Apply background to story card in Progress tile */
html body.myhome > main > div.dashboard > div.dashboard-grid > div.dashboard-tile.progress > div.content > myhome-progress > div > div > div.stories > div.story-container {
    background-color: rgba(248, 246, 246,1);
    border-left: unset;
    color: rgba(var(--ch-fg),1);
}

/* Add "divider" after header of story in Progress Tile */
html body.myhome > main > div.dashboard > div.dashboard-grid > div.dashboard-tile.progress > div.content > myhome-progress > div > div > div.stories > div.story-container div.header {
    padding-bottom: 1em;
    border-bottom: 2px solid rgba(56,54,55,1);
    text-transform: uppercase;
}

/* Change colour of loading spinner #1 */
html body.myhome .mat-progress-spinner circle {
    stroke: rgba(var(--accent), 1);
}

/* Change colour of loading spinner #2 */
html body.myhome .loading-overlay .loading-spinner {
    border-color: rgba(var(--accent), 1);
    border-top-color:transparent;
}

/* Error alert background fix
 */
.myhome alerts .error {
    color: rgba(var(--delete)) !important;
    border-color: rgba(var(--delete)) !important;
    background-color: rgba(var(--ch-bg),1) !important;
}

/**
 * Remove Icon - Timeline headers 
 */
html body.myhome > main > div.timeline > div div.progress-timeline myhome-timeline formcontrol[name=jobType] .form-control-wrapper > div mat-button-toggle-group mat-button-toggle {
    padding: 1.5em;
}
html body.myhome > main > div.timeline > div div.progress-timeline myhome-timeline formcontrol[name=jobType] .form-control-wrapper > div mat-button-toggle-group mat-button-toggle button {
    text-transform: uppercase;
}
html body.myhome > main > div.timeline > div div.progress-timeline myhome-timeline formcontrol[name=jobType] .form-control-wrapper > div mat-button-toggle-group .mat-button-toggle-button myhome-icon {
    display: none;
} 

/* Remove Left border on lists (Photo grid) */
.myhome-list > li .shadow {
    border-left: unset;
}

/* Capitalize Menu Labels*/
.myhome myhome-nav .navbar-container label {
    text-transform: uppercase;
}