/**
 *  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: */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200&family=Montserrat:wght@500&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap");

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

    /* Main theme colour for nav bar, icons, action buttons, links, highlights etc. */
    --primary: 120, 162, 47;
    --primary-contrast: 255, 255, 255;

     /* Secondary colour for smaller highlights */
    --accent: 120, 162, 47;
    --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: 28, 73, 35;
    --save-contrast: 255, 255, 255;

    /* Colour used for Error Messages, and Reject, Delete, etc. actions */
    --delete: 65, 64, 66;
    --delete-contrast: 255, 255, 255;

    --done: 120, 162, 47; /* Highlight colour for completed tasks, icons, etc. */
    --incomplete: 28, 73, 35; /* Highlight colour for incomplete tasks, icons, etc. */

    /* Background/Foreground Colours */
    --ch-bg: 255, 255, 255; /* Lightest background colour, usually white */
    --ch-bg-1: 222, 234, 229;
    --ch-bg-2: 230, 231, 232;
    --ch-bg-3: 188, 190, 192;
    --ch-bg-4: 147, 149, 152; /* Darkest background colour */
    --ch-fg: 0, 0, 0; /* Darkest text colour, usually black */
    --ch-fg-1: 65, 64, 66;
    --ch-fg-2: 109, 110, 113;
    --ch-fg-3: 147, 149, 152; /* 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: "Roboto", Helvetica, sans-serif;
    --font-default: "Roboto", Helvetica, sans-serif;

    /* Default Logo & Splash Image - uncomment to use */
    --splash-url: url("./assets/Rivergum-Homes_July_Brand_2024-309944.jpg"); /* background image on login page */
    --logo-url: url("./assets/Rivergum_Logo_Green_RGB.png"); /* logo URL, should blend nicely with white background */

    /* Miscellaneous Variables */
    --border-radius: 0px; /* 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 */
}

/* Background colour lighten */
html body.myhome {
    background-color: rgba(var(--ch-bg-2), 1);
}

/* Center the splash image */
html body.myhome > main.login, html body.myhome > main.resetpassword {
    background-position: center;
}

/* Remove rounded edges on buttons, etc */
html div:not(profile-pic > div), html mat-expansion-panel, html button, html a {
    border-radius: 0px !important;
}

/* Make the loading spinner round again. */
html body.myhome .loading-overlay .loading-spinner {
  border-radius: 80px !important;
}

/* Contact Us Page Layout adjustments */
 body.myhome > main > div.contact > .contact-info {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
  }
  @media screen and (max-width: 800px) {
    html body.myhome > main > div.contact > .contact-info {
      padding-left: 40px;
    }
    html body.myhome > main > div.contact > .contact-info myhome-roles div.info {
      flex-direction: column;
    }
  }
  html body.myhome > main > div.contact > .contact-info {
    overflow-y: auto;
  }
  html body.myhome > main > div.contact > .contact-info > div:first-child {
    flex-grow: 1;
  }
  html body.myhome > main > div.contact > .contact-info > div:last-child {
    flex-grow: 0.5;
  }
  html body.myhome > main > div.contact > .contact-info > div .opening-hours > li > .info > label, html body.myhome > main > div.contact > .contact-info > div .opening-hours > li > .info > div {
    min-width: auto;
    padding: 0.5em;
  }
  html body.myhome > main > div.contact > .map {
    flex-basis: 50%;
    min-height: 300px;
    min-width: 300px;
    padding: 20px;
  }
  html body.myhome > main > div.contact > .map > myhome-map {
    width: 100%;
    height: 100%;
  }

/**
 * Remove Appointments Dashboard Tile
 * - Restore once it's to be restored
 * - Remember to restore config for nav menu
 */
 /**
  * Remove Contact Tile
  * Contact Us pulls details from tblUsers and displays work phone, mobile and email if available. 
  * - Sometimes clients don't want to show their direct mobile number or emails to customers.
  * - E.g. RiverGum wanted to remove mobiles from showing (supervisor's direct number was listed without them knowing) and change the email to a shared mailbox (better for record keeping and team monitoring of incoming emails). This wasn't achievable so I had to remove the contact feature entirely.
  * If work, mobile and email is null in tblUsers, it will still display a name without any contact information.
  * Hiding the "Contact Us" page using op code 8722 just removes the icon from the sidebar, the information is still accessible on the Home page under "Your Contacts".
  */
html body.myhome > main > div.dashboard > .dashboard-grid .dashboard-tile.appointments,
html body.myhome > main > div.dashboard > .dashboard-grid .dashboard-tile.contact  {
  display: none;
}

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

@media screen and (min-width: 1301px) and (max-height: 800px) {
  html body.myhome > main > div.dashboard > .dashboard-grid {
    grid-template-rows: auto auto auto;
  }
}

@media screen and (max-width: 1300px) {
  html body.myhome > main > div.dashboard > .dashboard-grid {
    grid: "progress progress" auto "contact contact" auto "photos photos" 1fr "notes docs" auto/1fr 1fr;
  }
  html body.myhome > main > div.dashboard > .dashboard-grid .dashboard-tile {
    min-height: 33vh;
  }
}

@media screen and (max-width: 800px) {
  html body.myhome > main > div.dashboard > .dashboard-grid {
    max-width: 100vw;
    grid: "progress" auto "contact" auto "housetype" 1fr "photos" auto "appointments" auto "photostat" auto "docs" auto "notes" auto "surveystat" auto/1fr;
  }
  html body.myhome > main > div.dashboard > .dashboard-grid .dashboard-tile > .heading > h3 {
    padding-left: 50px !important;
  }
}

/* Maintenance - Remove Supervisor / Contract Admin */
body > main > div > div.maintenance-sidebar > myhome-maintenance-overview > div > div.maint-detail-supervisor.maint-detail-role {
    display: none;
}

body > main > div > div.maintenance-sidebar > myhome-maintenance-overview > div > div.maint-detail-admin.maint-detail-role {
    display: none;
}