/* style.cs: BYU IT&C 210a Boilerplate Stylesheet */

/* We use the Material Icons font in some of the styles. This brings in
the corresponding fonts from Google Fonts. */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

/* The root rule is the foundation for the whole page. These settings _cascade_
to all elements unless they are overridden. */
:root {
    /* Change these variables according to your theme */
    --primary: #3f51b5;
    --accent: #2e7d32;
    --delete: #d32f2f;
    --primary-text: #ffffff;

    background-color: lightgray;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* These rules with element selectors apply to all elements of the corresonding names. In a sense, they
are automatically applied */

body {
    max-width: 55rem;            
    margin: 0.5em auto;           
    border: 1px solid black;    
    border-radius: 5px;          
    padding: 0.75rem;            
    background-color: white;
}

h1 {
    font-family: "Arial Black", Arial, sans-serif;
    font-weight: bolder;
}

nav {
    color: white;               
    background-color: var(--primary);
    padding: 0.75rem;           
}

nav a {
    color: var(--primary-text);      
    text-decoration: none;
}

.tasklist {
    padding-left: 0;        
    list-style-type: none;  
    margin-bottom: 2rem;
}

.task {
    display: block;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    margin-bottom: 0.5rem;
    padding: 0.4rem;
}

.task-done {
    display: inline-block;
    width: 2em;
    box-sizing: border-box;
    color: var(--accent);
}

.task-description {
    display: inline-block;
    width: calc(100% - 13em); 
    box-sizing: border-box;
    word-break: break-word;  
}
/* Adds responsive scaling for mobile devices */
@media (max-width: 600px) {
    body {
        margin: 0;
        border-radius: 0;
        border: none; /* Removes the heavy outer border on small phone screens */
        padding: 0.5rem;
    }

    .task-description {
        width: calc(100% - 11em); /* Extra breathing room on small screens */
    }
}

.task-date {
    color: #666;
    font-size: 0.85em;
    font-weight: 500;
}

.task-delete {
    display: inline-block;
    width: 2em;
    box-sizing: border-box;
    color: var(--delete);
    text-align: center;
}

.material-icon {
    border: none; 
    background: none;
    font-family: 'Material Icons';
    font-size: inherit;
    cursor: pointer; 
}

/* Add your custom class rules here */
.example {
    color: var(--primary-text);
}

.task-completed {
    text-decoration: line-through;
}

input.checkbox-icon {
    font-family: 'Material Icons';
    font-size: inherit; 
    appearance: none;   
    cursor: pointer; 
}

input.checkbox-icon:before {
    content: 'check_box_outline_blank';
}

input.checkbox-icon:checked:before {
    content: 'check_box';
    color: var(--accent);
}

/* ===== toggle-switch =============== */
/* This is pretty advanced CSS and is intended to be ready-to-use. Just
 * set an input of type checkbox to class 'toggle-switch' to make the
 * control look like a switch instead of a checkbox.
 * Example:
 *     <input type='checkbox' name='cb1' class='toggle-switch'/><label for='cb1'>Lights</label>
 *
 * Adapted from: https://codeconvey.com/convert-checkbox-to-toggle-button-css/
 * with important adjustments to make it senstive to the local font size.
 * and the addition of comments.
 */

/* Toggle Switch */
input.toggle-switch {
    vertical-align: middle;
    font-size: 1em;     
    appearance: none;   
    position: relative; 
    cursor: pointer;    
    margin: 0em 0.2em;  
    width: 1.4em;       
    height: 0.8em;
}

/* Use the :after pseudo-element to create an oval as the surface of the button. */
input.toggle-switch:after {
    vertical-align: middle; 
    content: '';            
    display: inline-block;  
    position: absolute;     
    width: 1.4em;           
    height: 0.6em;
    background-color: rgb(128,128,128); 
    border-radius: 0.3em;   /* Border radius of half the height makes this an oval instead of a rectangle */
}

/* Use the :before pseudo-element to create a circle as the toggle handle */
input.toggle-switch:before {
    vertical-align: middle; /* Center this vertically thereby aligning to the background oval */
    content: '';            /* Empty text content required to take up any space */
    display: inline-block;  /* Inline-block makes it take up rectangular space */
    position: absolute;     /* Absolute positioning without x and y locates this on top of the input.toggle-switch */
    width: 0.7em;           /* Width and height are the same making it take up a square space which will be round with the border-radius */
    height: 0.7em;
    z-index: 1;             /* Z-index of 1 positions this on top of the input.toggle-switch:after */
    left: 0;                /* Position at the left edge of the parent checkbox (it will shift right when activated) */
    top: -0.1em;            /* Center it vertically on the background oval - tweaked to position just right */
    border: 1px solid rgb(128,128,128); /* border is the same color as the background oval */
    border-radius: 0.6em;   /* Radious greater than 1/2 the height/width makes a circle */
    background-color: white;  /* Fill with white */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Cast a shadow on the background */
    transition-duration: 0.3s; /* Animate turning on or off over 0.3 seconds */
}

/* Shift the handle to the right when turned on */
input.toggle-switch:checked:before {
    left: 0.7em;            /* When turned on, shift to the right */
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6); /* When turned on, cast the shadow the other direction */
}

input.toggle-switch:checked:after {
    background-color: #16a085;
}

.task-form-input {
  width: 100%;
  box-sizing: border-box;
}

.btn-create-task {
  background-color: var(--primary);
  color: var(--primary-text);
  border: none;
  border-radius: 4px;
  font-weight: bold;
  padding: 8px 16px;
  cursor: pointer;
}

.btn-create-task:hover {
  background-color: #0056b3;
}