/*
 * ==============================================================================
 * Search Table - Stylesheet
 * ==============================================================================
 *
 * File: filter_table.css
 * Version: 1.0
 * Date: May 2025
 * Author: YG-1
 *
 * Purpose:
 *   asdf
 * 
 * Dependencies:
 *   - 
 * 
 * Naming Conventions:
 *   - 'ftable'
 * 
 * TODO:
 *   - responsive values
 *   - center reset all button
 * 
 * ==============================================================================
 */

/* ================================================== */
/* =  CSS Variables                                 = */
/* ================================================== */

:root {
  /* ================ DIMENSIONS ================ */
  /* ---- General Settings ---- */
  --font-size: 0.9rem;
  --font-size-small: 0.75rem;
  
  --filter-control-spacing-y: calc(0.25rem + 2px);
  --filter-control-spacing-x: 0.75rem;
  
  --rounded-corners: 4px;
  
  /* ================ COLORS ================ */
  --background-gray: #d9d9d9;
  --shaded-row-color: #e1e1e1;
}



/* ================================================== */
/* =  Overall Layout                                = */
/* ================================================== */

#ftable {
  width: min-content;  /* filter will attempt to match table width */
  margin: 12px 0;
  
  /*box-sizing: border-box;*/  /* if padding or borders are used*/
}

#ftable-filter-container {
  width: min-content;
  padding: 12px 0;
  margin-bottom: calc(0.75rem + 12px);
  
  display: flex;
  flex-direction: column;
  
  background-color: var(--background-gray);
  border-radius: 0.375rem;
}

#ftable-table-container  {
 /* margin-top: 6px; */
}



/* ================================================== */
/* =  Filter Section                                = */
/* ================================================== */

#ftable-filter-container table {
  height: fit-content;
  margin: 0px 8px;
  
  border: none;
}

#ftable-filter-container table th {
  padding: var(--filter-control-spacing-y) 0.375rem;
  
  background-color: var(--background-gray);
  border: none;
  
  font: bold var(--font-size-small) Arial;
  color: black;
}

#ftable-filter-container table td {
  padding: var(--filter-control-spacing-y) var(--filter-control-spacing-x);
  
  vertical-align: top;
  
  border: none;
}

#ftable-filter-container table div {
  display: block;  /* reset button is always below <select> */
}

/* ================ text input ================ */
#ftable-filter-container .search-input input{
  padding: 12px 20px 12px 40px;
  
  background-image: url('https://www.w3schools.com/howto/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  border: 1px solid #ddd;
  border-radius: var(--rounded-corners);
  
  font-size: var(--font-size);
}

/* ================ dropdown ================ */
#ftable-filter-container .dropdown-menu {
  min-width: 10rem;
  max-height: 400px;
  margin: 0;
  
  display: none;
  position: absolute;
  overflow: auto;
  z-index: 3;
/*  top: 100%;*/
/*  left: 0px;*/
  
  background-color: #f6f6f6;
  border: 1px solid #ddd;
  border-radius: 2px;
}

/* ==== dropdown button ==== */
#ftable-filter-container .dropdown-wrapper button {
  padding: 0.75rem 1rem;
  margin-bottom: 0.25rem;
  
  background-color: #04AA6D;
  border: none;
  border-radius: var(--rounded-corners);
  
  color: white;
  font-size: var(--font-size);
  
  cursor: pointer;
}

#ftable-filter-container .dropdown-wrapper button:is(:hover, :focus) {
  color: #f2f2f2;
  background-color: #03905d;
}

/* ==== dropdown text input ==== */
#ftable-filter-container .dropdown-menu input {
  padding: 14px 20px 12px 45px;
  
  position: sticky;   /* make the header fixed in place */
  top: 0px;
/*  z-index: 2;*/

  box-sizing: border-box; /*************************************/
  background-image: url('https://www.w3schools.com/howto/searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  border: none;
  border-bottom: 1px solid #ddd;
  
  font-size: var(--font-size);
}

#ftable-filter-container .dropdown-menu input:focus {outline: 3px solid #ddd;}

/* ==== dropdown items ==== */
#ftable-filter-container .dropdown-menu a {
  padding: 12px 16px;
  
  display: block;
  
  color: black;
  text-decoration: none;
  font: normal var(--font-size) Arial;
}

#ftable-filter-container .dropdown-menu a:hover {background-color: #ddd;}

#ftable-filter-container .show-dropdown {display: block;}


/* ================ select form ================ */
#ftable-filter-container .select-dd {}
#ftable-filter-container .select-dd select {
  padding: 4px;
  
  background-color: #fff;
  border: none;
  
  color: gray;
}

/* ================ multi-line select form ================ */
#ftable-filter-container .multi-select {
  padding: var(--filter-control-spacing);
}

#ftable-filter-container .multi-select select {
  width: 7rem;
/*  max-height: 150px;*/
  min-width: fit-content;
  padding: 2px;
  
  border: solid white;
}

/* ================ select form (both types) ================ */
#ftable-filter-container select {
 border-radius: var(--rounded-corners);
}

#ftable-filter-container :is(optgroup, .option-placeholder) {
  color: gray;
  font-style: italic;
  font-weight: normal;
}

#ftable-filter-container option {
  color: black;
}

#ftable-filter-container option:disabled {
  color: lightgray;
}

#ftable-filter-container option:selected {
/*  color: white;*/
}

/* ================ reset button ================ */
#ftable-filter-container #reset-all {
  padding: 0.125rem;
  margin: .75rem 30% 0.25rem;
  
  text-align: center;
}

#ftable-filter-container .reset-btn {
  padding: 0.125rem 1.25rem;
  margin-top: calc(2 * var(--filter-control-spacing-y));
}

#ftable-filter-container .apply-btn {}



/* ================================================== */
/* =  Table Section                                 = */
/* ================================================== */

#ftable-table-container thead :is(th, td) {
  box-sizing: border-box;
}

.hide-row {
  display: none;
}

.row-even {
  background-color: var(--shaded-row-color);
}

.row-odd {}