/*
 SCSS style sheet for HA dnsmasq-dhcp addon
 If you are reading this comment inside the .css file, please be aware that the .css file is autogenerated,
 any change there will be lost when docker image is rebuilt.

 NOTE: portions of this file have been taken from https://codepen.io/serhatbek/pen/bGyVLpM?editors=1111
*/


/* define colors */

:root {
  --btn-text-inactive: #101927;
  --background-tab: #f7f7f7;
  --btn-text-active: #2955ac;
  --btn-text-hover: #d4ddee;
  --background-mono-text: lightgrey;
  --text-color: black;  // General text color
  --background-color: white; // General background color
}

body {
  background-color: white;
  color: black;
  font-family: 'Roboto', 'Mono', sans-serif;
  font-weight: 500;
}


/* be dark-mode friendly */

@media screen and (prefers-color-scheme: dark) {
  :root {
    --btn-text-inactive: #e0e0e0; // Lighter for dark mode
    --background-tab: #222;
    --btn-text-active: #64b5f6; // Lighter blue
    --background-mono-text: #444;
    --text-color: white;
    --background-color: #121212;
  }

  // note that the override of the body foreground/background color will 
  // be inherited also by the DataTable
  body {
    background-color: black;
    color: white;
  }
  
  // in dark mode the usual blue of the links in the datatable is hard to read,
  // change it to a soft blue
  .dataTable > tbody > tr > td > a {
    color: var(--btn-text-active);
  }
}


/* styles used in the UI */

.topLevel {
    margin-left: 10px;
    color: var(--text-color); // Use the variable
}

.uiSettings {
    text-align: right;
}

.liveIndicator > img {
    vertical-align: middle;
}

.solidBorder {
    border: 1px solid;
}

.monoText {
    font-family: monospace;
    background-color: var(--background-mono-text);
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.boldText {
    font-weight: bold;
}

.container {
    //max-width: 980px;
    width: 100%;
    margin: 0 auto;
    //padding: 60px 16px 30px 16px;
    //display: flex;
}

/*
a[href*="http"]::after {
    content: '⎋';
    display: inline-block;
    transform: rotate(90deg);
    margin-inline-start: var(--space1);
    vertical-align: middle;
    font-size: 0.75em;
}*/

.footer {
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    font-size: 12px;
}


/* modern checkbox */

.checkbox-wrapper .modernCheckbox {
    appearance: none;
    background-color: #dfe1e4;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
    vertical-align: middle;
  }

  .checkbox-wrapper .modernCheckbox::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
  }

  .checkbox-wrapper .modernCheckbox,
  .checkbox-wrapper .modernCheckbox::after {
    transition: all 100ms ease-out;
  }

  .checkbox-wrapper .modernCheckbox::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
  }

  .checkbox-wrapper input[type=checkbox] {
    cursor: default;
  }

  .checkbox-wrapper .modernCheckbox:hover {
    background-color: #c9cbcd;
    transition-duration: 0s;
  }

  .checkbox-wrapper .modernCheckbox:checked {
    background-color: #6e79d6;
  }

  .checkbox-wrapper .modernCheckbox:checked::after {
    background-color: #fff;
    left: 13px;
  }

  .checkbox-wrapper :focus:not(.focus-visible) {
    outline: 0;
  }

  .checkbox-wrapper .modernCheckbox:checked:hover {
    background-color: #535db3;
  }




/* tabs implementations */

.btn {
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    background: transparent;
    outline: transparent;
    border: transparent;
    color: var(--btn-text-inactive);
    transition: 300ms all ease-in-out;
    cursor: pointer;
    @media only screen and (max-width: 576px) {
        padding: 10px 8px;
    }
    transform: scale(1);

    &.active {
        color: var(--btn-text-active);
        position: relative;

        /* make the active item slightly bigger to emphasize it's the active tab */
        transform: scale(1.1);

        &::after {
            content: '';
            width: 100%;
            height: 2px;
            background-color: var(--btn-text-active);
            position: absolute;
            bottom: -2px;
            left: 0;
            transform: scale(1);
        }
    }
    &:hover {
        color:var(--btn-text-active);
        background-color: var(--btn-text-hover);

        /* make the hovered item slightly bigger to emphasize it's the hovered tab */
        transform: scale(1.1);
    }
}

.tabs {
    background-color: var(--background-tab);
    border-radius: 8px;
    padding: 16px 16px 16px 16px;

    &__pills {
        //width: fit-content;
        border-bottom: 2px solid rgba($color: var(--btn-text-inactive), $alpha: 0.2);
    }

    &__panels {
        padding: 20px 0;

        // the styling for inactive panels
        > div {
            width: 100%;
            display: none;
            gap: 20px;

            > figure {
                max-width: 400px;
                width: 100%;
                flex-shrink: 0;

                @media only screen and (max-width: 992px) {
                    margin: 0 auto;
                }

                img {
                    width: 100%;
                    display: block;
                }
            }

            > div {
                > h4 {
                    font-size: 24px;
                    margin: 10px 0;
                }

                > p {
                    line-height: 1.8;
                }
            }
        }

        // the styling for the active panel
        > div.active {
            display: block;

            //@media only screen and (max-width: 978px) {
            //    flex-direction: column;
            //}
        }
    }
}