:root {
    --border-color: #3d444d;
    --background-color: #0d1117;
    --normal-text-color: #9198a1;
    --bold-text-color: #f0f6fc;
    --link-color: #4493f8;
    
    --highlight-row-color: #151b23;
    --green-row-color: #2ea04326;
    --green-row-highlight-color: #19362A;
    --red-row-color: #f851491a;
    --red-row-highlight-color: #362329;
    
    --green-color: #2e9a40;
    --red-color: #e42122;
}



		/* ------------------ General ------------------ */



body {
    font-family: 'Space Mono', monospace;
    background: var(--background-color);
    color: var(--normal-text-color);
}

/* Bold text */
b { color: var(--bold-text-color); }

/* Links */
a, a:visited {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    text-underline-offset: .2rem; /* Ignore error */
}

/* Inherit font from body, doesn't happen automatically for some reason */
button, input, select {
    font-family: inherit;
}

/* Save button */
.save_button {
    padding: 4px 8px 6px 8px;
    text-align: center;

    font-size: 15px;
    border: 1px solid;
    background: var(--green-color);
    border-radius: 0px;
    color: var(--bold-text-color);
    border-color: var(--bold-text-color);
}



		/* ------------------ Table ------------------ */



/* Dynamic colors */
tr:hover td          { background-color:       var(--highlight-row-color); }
.remove_button:hover { background:                       var(--red-color); }
.add_button:hover    { background:                     var(--green-color); }
.green_row           { background-color:           var(--green-row-color); }
.green_row:hover td  { background-color: var(--green-row-highlight-color); }
.red_row             { background-color:             var(--red-row-color); }
.red_row:hover td    { background-color:   var(--red-row-highlight-color); }


/* Container for 3 panes that themselves contain headers. They are separate to keep them from scrolling away, but mimic the body tables in style */
.header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal panes */
    gap: 8px; /* Gap between panes */
}

/* Container for 3 scrolling panes that themselves have tables with ingredient content */
.body-grid {
    display: grid;
    height: 60vh; /* 60% of viewport height. because other elements are not based on viewport dimensions, things don't scale consistently */
    grid-template-columns: 1fr 1fr 1fr; /* Three equal panes */
    gap: 8px; /* Gap between panes */
    padding-bottom: 10px;
}

/* Scrolling panes */
.pane {
    overflow-y: auto;   /* Scroll on y axis when too long */
}

/* Table widths */
table{
    table-layout: fixed; /* All cell sizes depend on the cell sizes of the first row */
    width: 100%; /* Take full width of the pane */
    box-sizing: border-box; /* Include border and padding as part of width / height sizings */
}
.column-0 { width: 26.9167px; }
.column-1 { width: 26.9167px; }
.column-2 { width:      6rem; }
.column-3 { width:      auto; }
.column-4 { width:      4rem; } /* Just enough for 'XXX d' */


/* Borders */
table, tr, th, td {
    border: 1px solid;
    border-color: var(--border-color);
    border-collapse: collapse; /* Removes double bordering */
}



		/* ------------------ Table cells ------------------ */



/* All cells */
td {
    /* Minimal height is constrained by the text element. Wrap in a div for precise control */
    /*height: 0.5rem;*/
    
    white-space: nowrap; /* Prevent wrapping, new words are not visible */
    overflow: hidden; /* Hide overflowing part instead of displaying it poking out of the element */
    
    /* Cells are padded by 1px at top and bottom - unnecessary */
    padding: 0;
}

/* In-cell text */
table tr td p {
    margin: 0; /* Text comes with thick top and bottom margins - unnecessary */
}

/* Ingredient name cell */
.label_cell {
    padding-left: 0.5rem; /* Pad the text from the left edge of the cell */
    
    /* Remove borders, need to also remove them from the adjacent cells */
    border-right: none;
    border-left: none;
}

.quantity_cell {
    padding-left: 0.5rem;
    border-right: none;
}

/* Shelf life cell */
.shelf_life_cell {
    padding-right: 0.5rem;
    text-align: right;
    border-left: none;
}

/* Add & remove buttons */
.add_button, .remove_button {
    /* Padding increases the internal volume of the button */
    padding: 6px 8px 8px 8px;
    
    color: var(--bold-text-color);
    background: var(--background-color); /* Same as site color */
    border: 0;
    font-family: 'Verdana', sans-serif; /* Verdana offers bigger +- symbols */
}



		/* ------------------ Forms ------------------ */



/* Text fields and drop downs */
input, select {
    font-size: 15px;
    border: 1px solid;
    border-color: var(--border-color);
    color: var(--bold-text-color);
    border-radius: 0px;
    padding: 4px 8px; /* Pad vertical and horizontal, to match the text */
    background-color: var(--background-color);

}

/* Submit button */
input:not(label input) {
    background: var(--green-color);
    border-color: var(--bold-text-color);
    padding: 4px 8px 6px 8px;
}

.red-button {
    background: var(--red-color);
}



		/* ------------------ Speech bubble ------------------ */




.title-row {
    display: flex;
    justify-content: space-between; /* left + right */
    align-items: center; /* vertical centering */
    width: 100%;
}

.title {
    margin-right: auto;   /* pushes bubble + image to the right */
    margin-top: 10px;
}
  
/* Speech bubble wrapper (keeps triangle aligned) */
.speech-message {
    display: inline-block;
    position: relative; /* needed for the triangle (.speech-box::after) */
    float: right;
    margin-right: 4px;    /* small gap before the image */
    flex-shrink: 0;
}

/* Speech bubble box */
.speech-bubble .speech-box {
    background: var(--border-color);
    display: flex;
    
    /* Padding around thext */
    padding: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: var(--bold-text-color)
    
    /*width: 100%;*/
    /*height: 100%;*/
    /*overflow: auto;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*line-height: 1.3;*/
  }

/* Triangle */
.speech-box::after {
      
    /* Position relative to the speech box */
    position: absolute;
    right: 0px;
    bottom: -12px;
    
    /* This creates a triangle using borders */
    content: "";
    width: 0;
    height: 0;
    border-right: 12px solid var(--border-color);
    border-left: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.pfp {
    width: auto;
    margin-top: 14px;
    height: 40px;         /* or whatever size you want */
    flex-shrink: 0;       /* prevent it from stretching or shrinking */
    margin-right: 8px;    /* small gap before bubble */
    border: 3px solid var(--border-color);
}