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


/* Custom fonts */
@font-face {
    font-family: 'BLMelody-Regular';
    src: url('./assets/BLMelody-Regular.otf');
}
@font-face {
    font-family: 'BLMelody-Light';
    src: url('./assets/BLMelody-Light.otf');
}

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

    /* Main theme colour for nav bar, icons, action buttons, links, highlights etc. */
    --primary: 105, 130, 66;
    --primary-contrast: 255, 255, 255;

     /* Secondary colour for smaller highlights */
    --accent: 51, 51, 51;
    --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: 38, 194, 128;
    --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: 13, 185, 61; /* Highlight colour for completed tasks, icons, etc. */
    --incomplete: 255, 209, 26; /* Highlight colour for incomplete tasks, icons, etc. */

    /* Background/Foreground Colours */
    --ch-bg: 255, 255, 255; /* Lightest background colour, usually white */
    --ch-bg-1: 244, 246, 251;
    --ch-bg-2: 238, 240, 245;
    --ch-bg-3: 227, 230, 236;
    --ch-bg-4: 51, 51, 51; /* Darkest background colour - Updated to #333333 */ 
    --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: 'BLMelody-Regular', arial, sans-serif;
    --font-default: 'BLMelody-Light', arial, sans-serif;

    /* Default Logo & Splash Image - uncomment to use */
    --splash-url: url('./assets/Nicholson.png'); /* background image on login page */
    --logo-url: url('./assets/ToddDevine_RBG_FullLogo_DarkGreen.jpeg'); /* logo URL, should blend nicely with white background */

    /* Miscellaneous Variables */
    --border-radius: 4px; /* How rounded buttons, lists, divs etc. should typically be. 0px = hard square */
    --shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); /* Shadow style, you can set this to none for no shadow at all */
}

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 */
}

/* Update Header text colour */
html body.myhome > .header > h1,
html h2,
html body.myhome > .header > div.contractDetails,
html body.myhome > main > div.notes myhome-notes .page-container .content-panel h4 {
    color: #333333;
}

/* Dashboard panel headers, Timeline panel toggle buttons */
html body.myhome > main > div.dashboard > .dashboard-grid .dashboard-tile > .heading > h3,
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 {
    background-color:  #bfcac1;
    color: #fffcf2;
}

/* Remove rounded edges on buttons */
button.mat-flat-button, .maint-tile .tile-nav a.nav-button {
    border-radius: 0;
}

/* Create button for Add Note, Add Issue/Note (Maintenance) */
html body.myhome > main > div.notes myhome-notes .page-container .content-panel footer .mat-flat-button,
html body.myhome > main .maintenance-content myhome-notes .page-container .content-panel footer .mat-flat-button, 
html body.myhome > main .maintenance-content myhome-issues .issues footer .mat-flat-button {
    background-color: rgba(var(--primary), 1);
}

/* Maintenance */
html body.myhome > main > div.maintenance h2,
html body.myhome > main > div.maintenance .maintenance-info myhome-dynamic-content {
    color: #fffcf2;
}

/* Timeline */
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 {
    border: 1px solid #8C978E;
}

/* Fix default colour of "story" icon from BG colour */
html body.myhome > main .progress-timeline myhome-timeline .timeline-data > .icon, html body.myhome > main .progress-timeline myhome-timeline .timeline-data:before,
html body.myhome > main .progress-timeline myhome-timeline .timeline-data.done > .icon, html body.myhome > main .progress-timeline myhome-timeline .timeline-data.done:before {
    background-color: rgba(var(--primary),1) !important;
}

/* Alerts - No Results = Updated to work with Custom background. */
html body.myhome .maintenance-content .myhome-list .no-results,
html body.myhome .maintenance-content myhome-photos .no-results,
html body.myhome myhome-photos .no-results,
html body.myhome myhome-notes .no-results,
html body.myhome myhome-documents .no-results {
    color: #fffcf2;
}

/* Remove Date completed from Timeline stories */
myhome-timeline > .timeline .dateCompleted {
    display: none;
}

@media screen and (max-width: 800px) {
  html body.myhome > main.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8vw 4vw;
    overflow: auto;
  }
  html body.myhome > main.login .content {
    position: static !important;
    right: auto !important;
    margin: 0;
    width: 100%;
    max-width: 520px;
    height: 100%;
    max-height: fit-content;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    box-sizing: border-box;
  }
  html body.myhome > main.login .content .dialog {
    width: 100%;
  }
  html body.myhome > main.login .content .logo img {
    margin: 0.75rem 0 0.5rem;
    max-height: 48px;
  }
  html body.myhome > main.login .content h1,
  html body.myhome > main.login .content h2 {
    margin-top: 0;
    word-break: break-word;
  }
  html body.myhome > main.login .content .mat-form-field,
  html body.myhome > main.login .content input,
  html body.myhome > main.login .content button {
    width: 100%;
  }
  html body.myhome > main.login .content button {
    margin-top: 0.75rem;
  }
}