@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,700");

/* ============================================================
   Gantt Filter Pane -- Core Stylesheet
   All classes prefixed with 'gc-' to avoid collisions.

   Font: Roboto is imported above and set as the default via
   --gc-font-family. Override this variable in your own CSS
   to use a different font:
       :root { --gc-font-family: "My Font", sans-serif; }
   ============================================================ */

:root {
    --gc-filter-border-colour:     #FADA5E;  /* Royal Yellow */
    --gc-filter-background-colour: #FFFACD;  /* Lemon Chiffon */
    --gc-filter-text-colour:       #008CBA;  /* Blue */
    --gc-filter-text-colour-dark:  #006a8e;  /* Darker blue -- hover states */
    --gc-font-family:              "Roboto", sans-serif;
}

/* -- Container -- yellow-bordered flex row, untouched -------- */
.gc-filter-container {
    display: flex;
    width: 100%;
    max-width: none;
    border: 2px solid var(--gc-filter-border-colour);
    border-radius: 4px;
    background-color: var(--gc-filter-background-colour);
    color: var(--gc-filter-text-colour);
    padding: 5px;
    margin: 0;
    font-family: var(--gc-font-family);
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}

.gc-filter-container:empty {
    display: none;
}

/* -- Hyperlink reset -- prevents host application's global a{}
   and a:hover{} rules from affecting the Clear filter link -- */
.gc-filter-container a {
    color: var(--gc-filter-text-colour);
    text-decoration: none;
    transition: none;
}

.gc-filter-container a:hover {
    color: var(--gc-filter-text-colour);
    text-decoration: none;
}

/* -- Image reset -- prevents host application's global img{}
   rules from affecting the filter icon -------------------- */
.gc-filter-icon img {
    display: inline;
    max-width: none;
}

/* -- Layout -- flex children, untouched --------------------- */
.gc-filter-icon {
    flex: 1 1 0;
    padding: 5px 10px;
    margin: auto;
}

.gc-filter-date {
    flex: 7 1 0;
    padding: 5px 30px;
    margin: auto;
    min-width: 0;
}

.gc-filter-select {
    flex: 7 1 0;
    padding: 5px 30px;
    margin: auto;
    min-width: 0;
}

.gc-filter-apply {
    flex: 2 1 0;
    padding: 5px;
    margin: auto;
}

.gc-filter-clear {
    flex: 2 1 0;
    padding: 5px;
    margin: auto;
}

/* -- Labels -- identical styling across date and select ----- */
.gc-filter-date label,
.gc-filter-select label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 4px;
}

/* -- Input and select -- aligned with add bar form styling -- */
.gc-filter-date input,
.gc-filter-select select {
    width: 100%;
    padding: 8px 10px;
    min-height: 2.4em;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-family: var(--gc-font-family);
    font-size: 0.9rem;
    font-weight: 400;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gc-filter-date input:focus,
.gc-filter-select select:focus {
    outline: none;
    border-color: var(--gc-filter-text-colour);
    box-shadow: 0 0 0 3px rgba(0,140,186,0.15);
}

/* iOS Safari inflates datetime-local fields beyond min-height --
   constrain explicitly to match select height on all devices   */
.gc-filter-date input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    height: 2.4em;
    max-height: 2.4em;
    width: 100%;
}

/* -- Apply Filter button -- blue to match filter pane palette */
.gc-filter-button {
    display: inline-block;
    padding: 8px 16px;
    min-height: 2.4em;
    box-sizing: border-box;
    background: var(--gc-filter-text-colour);
    color: #fff;
    border: 1px solid var(--gc-filter-text-colour-dark);
    border-radius: 4px;
    font-family: var(--gc-font-family);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    outline: 0;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: all 0.2s ease;
}

.gc-filter-button:hover {
    background: var(--gc-filter-text-colour-dark);
    border-color: var(--gc-filter-text-colour-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,140,186,0.4);
}

/* -- Clear filter link -------------------------------------- */
.gc-filter-clear a {
    font-size: 0.9rem;
    font-weight: 400;
}