/***********************************************************************
    File name: base.css
    Site: al-porto.org

    Copyright 2023 Michael J. Miller, All rights reserved

    Purpose: home screen twig template

    This file also defines the layer structure for all css where:
        generic         -general styles in base and layout files
        theme           - not sure if needed using for button styles and such
        page            - page specific css
        override        - rules which override page rules
        superoverride   - used for things like .selected which must always show

    Revision History:
    Date        Version     Details
    --------    --------    --------------------------------------------

************************************************************************/
@layer generic, theme, page, override, superoverride;
a:visited {
/*    color: inherit;*/
}
/************************************************************************

                DIALOGS
*
*************************************************************************/

@layer generic {
    dialog, .dialog {
        border-radius: 16px;
        border-style: solid;
        border-width: 4px;
        border-color: var(--dialog-border-color);
        background-color: var(--dialog-background-color);
        color: var(--dialog-text-color);
        padding: 16px;
    }

    dialog::backdrop {
    /*    background-color: var(--dialog-backdrop);*/
        background-color: rgba(116,112,112,0.77);
    }
}
/************************************************************************
*
* rules for buttons
*
*************************************************************************/
@layer theme {
    .btn {
        cursor: pointer;
        background-color: rgba(245, 245, 245, 1.00);
        display: inline;
    /*    font-size: .65rem;*/
        border: thin solid rgba(203, 203, 203, 1.00);
        box-shadow: 0 1px 3px 0px rgba(203, 203, 203, 1.00);
        border-radius: 4px;
        padding: .3em .25rem;
        color: darkslategray;
        box-sizing: border-box;
        min-height: 2em;
        text-align: center;
    }
    .btn--icon {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0 4px;
    }
    .btn--icon-top {
        background-color: transparent;
        border: none;
        font-size: 1em;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 2px;
        padding-top: 6px;
        border-radius: 8px;
    }
    .btn--icon-top span {
        font-size: smaller;
    }
    .btn--link {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        color: #3a88fe;
        cursor: pointer;
    }
    .btn button {
        background-color: transparent;
        border: none;
        box-shadow: none;
    }
    .btn--sm, .btn--small {
        font-size: .7rem;
        border-radius: 6px;
        padding: .5em 2em;
        font-weight: 400;
        max-width: max-content;
    }
    .btn--md, .btn--medium {
        font-size: .85rem;
        border-radius: 6px;
        padding: .5em 2em;
        font-weight: 500;
    }
    .btn--lg, .btn--large {
    /*    border: thin solid black;*/
        font-size: 1.15rem;
        border-radius: 8px;
        padding: .75rem 2.5rem;
        font-weight: 600;
        min-height: 2.5em;
    }
    .btn--xlg, .btn--extra-large {
        border: thin solid black;
        font-size: 1.4rem;
        border-radius: 8px;
        padding: .75em 2.5em;
        font-weight: 600;
        min-height: 2.5em;
    }
    .btn--plain, .btn--plain button {
        border: none;
        background-color: inherit;
        box-shadow: none;
        color: rgb(85, 26, 139);
    }
    .btn--plain-inverse {
        border: none;
        background-color: inherit;
        box-shadow: none;
        color: whitesmoke;
    }
    .btn a {
        text-decoration: none;
    }
    /* the next three rules support adding a badge to a button - should work with any element
        the element has to be position: relative;top: 0; so the badge can also be positioned. 
    */
    .btn--badgeable {
        position: relative;
    }
    .btn--badge, .btn--badge-left {
        position: absolute;
        top: 5px;
        left: 5px;	
    }
    .btn--badge-bottom {
        position: absolute;
        bottom: 3px;
        right: 3px;	
    }
    .btn--badge-default {
        font-size: 8px;
        border: thin solid white;
        border-radius: 30%;
        padding: 2px;
        background-color: red;
        color: white;
    }
    .btn:enabled:hover {
        background-color: rgba(235, 235, 235, 1.00);
        color: rgba(0,0,0,1.00);
        opacity: 1 ;
    }
    .btn:active {
        background-color: rgba(205, 205, 205, 1.00);
        color: rgba(0,0,0,1.00);
    }
    .btn--blue:hover {
        background-color: rgba(132,196,217,1.00);
    }
    .btn--blue:active {
        background-color: rgba(51,139,168,1.00);
        color: whitesmoke;
    }
    .btn--blue {
        background-color: lightblue;
        border: thin solid rgba(10, 29, 230, 1.00);
        box-shadow: 0 1px 3px 0px rgba(10, 29, 230, .5);
    }
    .btn--green {
        background-color: rgba(143, 188, 143, .70);
        border: thin solid rgba(92,155,92,1.00);
        box-shadow: 0 1px 3px 0px rgba(92,155,92, .5);
    }
    .btn--green:hover {
        background-color: rgba(143, 188, 143, 1.00);
    }
    .btn--green:active {
        background-color: rgba(86,144,86,1.00);
        color: whitesmoke;
    }

    .btn--red {
        background-color: rgba(240, 128, 128, .70);
        border: thin solid red;
        box-shadow: 0 1px 3px 0px rgba(255, 0, 0, .5);
    }
    .btn--red:hover {
        background-color: rgba(240, 128, 128, 1.0);
    }
    .btn--red:active {
        background-color: rgba(231,60,60,1.00);
        color: whitesmoke;
    }
    .btn--yellow {
        background-color: rgba(249,252,20,0.70);
        border: thin solid yellow;
        border: thin solid rgba(220,223,2,0.98);
        box-shadow: 0 1px 3px 0px rgba(255, 0, 0, .5);
    }
    .btn--yellow:hover {
        background-color: rgba(249,252,20, 1.0);
    }
    .btn--yellow:active {
        background-color: rgba(231,206,60,1.00);
        color: whitesmoke;
    }
    .btn--orange {
        background-color: rgba(251,197,16,0.70);
        border: thin solid orange;
        box-shadow: 0 1px 3px 0px rgba(255, 0, 0, .5);
    }
    .btn--orange:hover {
        background-color: rgba(251,197,16,1.00);
    }
    .btn--orange:active {
        background-color: rgba(215,167,3,1.00);
        color: whitesmoke;
    }
    .btn--header {
        color: white;
        border: none;
    }
    .btn--header:hover {
        color: lightblue;
        border: none;
        background-color: transparent;
    }
    .btn--header:active {
        color: blue;
        border-color: transparent;
        background-color: transparent;
    }
    .btn--round, .btn--round a {
        border-style: none; /* default on safari is outset with inset for active */
        max-width: 4rem;
        max-height: 4rem;
        padding: .25rem;
        border-radius: 50%;
    }
    .btn--round img {
        border-radius: 50%;
        background-color: rgba(226, 255, 226, 0.40);
    }
    .btn--round img:hover {
        background-color: #98FF98;
    }
    .btn--round img:active {
        border-radius: 100%;
        background-color: #009200;
    }
    .btn--sm-caps {
        font-variant-caps: small-caps ;
        font-weight: bold;
    }
    .btn--nowrap {
        white-space: nowrap;
    }
    .btn--shrink {
        max-height: 2.2em;
        padding-left: 4ch;
        padding-right: 4ch;
    /*    margin: .5rem 0;*/
        max-width: min-content;
    }
    .btn--disabled, .btn--disabled:active, .btn--disabled:hover {
        opacity: .6;
        font-style: italic;
    /*    background-color: revert;*/
    }
    kbd {
      background-color: #eee;
      border-radius: 3px;
      border: 1px solid #b4b4b4;
      box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.2),
        0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
      color: #333;
      display: inline-block;
      font-size: 0.85em;
      font-weight: 700;
      line-height: 1;
      padding: 4px 4px 2px;
      white-space: nowrap;
    }
    .blocked-notice {
        background-color: yellow;
        padding: 3px;
        border: thin solid black;
        border-radius: 3px;
        color: red;
        font-weight: bold;
    }
}
@layer override {
    .clickable:not(btn--disabled):hover {
/*        background-color: lightgray;*/
        background-color: rgba(235, 235, 235, 1.00);
        color: gray;

        cursor: default;
    /*    border: thin dotted blue ;*/
    }
    .clickable:not(btn--disabled):active {
        background-color: rgba(180, 180, 180, 1.00);
        color: rgba(0,0,0,1.00);
    }
    picture.clickable:hover {
        opacity: .75;
    }
    picture.clickable:active {
        opacity: .9;
    }
    .error {
        color: red;
        font-weight: bold;
    }
    .warning {
        color: darkorange;
        font-weight: bold;
    }
    .no-show {
        display: none;
    }
/*    highligh search results when doing text searh on a page*/
    ::highlight(search-results) {
        background-color: yellow;
        color: black;
/*
        text-decoration-line: underline;
        text-decoration-style: dotted;
*/
    }
}
@layer override {
    ::highlight(select-results), ::target-text() {
/*
        background-color: orange;
        color: black;
*/
        text-decoration-line: underline;
        text-decoration-style: dotted;
    }

}
@layer generic {
    .checkbox {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    /*    margin-top: 8px;*/
    }
    .checkbox--large {
/*        transform: scale(1.5) translateY(-2px);*/
        transform: scale(1.5);
    }

    .checkbox--large-label, .label--large-checkbox {
        padding-left: .5rem;
    }
}

/************************************************************************
*
*  general utility rules
*
*************************************************************************/
/*
    .dragging {
        cursor: grabbing;        
    }
*/
@layer superoverride {
    .selected {
        background-color: var(--selected-background-color);
        color: var(--selected-color);
    }
}
@layer superoverride {
    .drag-source {
        background-color: var(--selected-background-color);
        color: var(--selected-color);
/*        doesn't do anything*/
/*        box-shadow: 0 0 6px 6px inset black;*/
    }
/*
    .dragging {
        cursor: grabbing;        
    }
*/
}
@layer generic {
    .has-orange-glow {
        filter: drop-shadow(0.25rem 0 0.75rem #ef9035);
    }
    .has-blue-glow {
        filter: drop-shadow(0.25rem 0 0.75rem #3499EF);
    }
    .drag-source {
        background-color: var(--selected-background-color);
        color: var(--selected-color);
    }
    .drag-target {
        background-color: wheat;
    }
    .collapsed, .no-match {
        display: none;
    }
    .flex-row {
        display: flex;
        flex-flow: row wrap;
        row-gap: 6px;
        column-gap: 6px;
        padding: .4em 0;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
    }
    .flex-column {
        display: flex;
        flex-flow: column nowrap;
        row-gap: 6px;
        column-gap: 6px;
        margin-bottom: .25em;
        width: 100%;
/*        padding: .4em 0;*/
/*        justify-content: space-between;*/
        align-items: center;
/*        white-space: nowrap;*/
    }
}
@layer override {
    /* used to show a value that was directly specified but is normally calculated */
    .override {
        font-style: italic;
        text-decoration: underline;
    }
    .stricken {
        text-decoration: line-through;
        opacity: .5;
    }
    .disabled {
        color: cadetblue ;
        cursor: not-allowed;
    }
    .hidden {
        display: none;
    }
    disabled:hover, disabled:active {
        color: cadetblue;
        border: none ;
    }

    input:not([type="search"]):invalid {
        border: medium solid red;
    }
    input:not([type="search"]):valid {
        border: thin solid black;
    }
    input:read-only, textarea:disabled {
        border: none;
        background-color: transparent;
    }
    input:disabled, textarea:disabled {
        border: none;
        background-color: transparent;
    }
}
@layer generic {
    .input {
        max-width: 700px;
        width: 95%;
        font-size: 1rem;
        padding-left: 6px;
        padding-top: .5em;
        padding-bottom: .5em;
    }
    .input--search {
        font-size: 1rem;
        padding: .25rem 6px;
        border: 2px solid lightgray;
        border-radius: 1rem;
        box-sizing: border-box;
        margin-right: 2rem;
        max-width: 40%;
    }
    .prompt--top {
        margin-bottom: 4px;
    }
    select:disabled {
        color: inherit;
    }
    .text-muted {
        color: var(--muted-color);    /*subdued gray for footer text */
    }
    .edit-field {
        max-width: 80px;
        height: 1.5em;
        border: thin solid black;
    }
    .link {
        color: #3a88fe;
        text-decoration: underline;
        cursor: pointer;
    }
    .link:hover{
    /*    text-decoration: none;*/
        background-color: aliceblue;
    }
    .link:active{
        background-color: #3a88fe;
        color: white;
        text-decoration: none;
    }
    .grid-left {
        text-align: left;
        padding-left: .5em;
    }
    .grid-right {
        text-align: right;
        padding-right: .5em;
    }
    /*  standard appearance of title bar in grid tables */
    .grid-title {
        background: var(--list-header-background-color);
        color: var(--list-header-color);
        border-bottom: thin solid black;
        position: sticky;
        top: 0;
    
        line-height: 1.5em;
        padding-top: .25em;
        padding-bottom: .25em;
        padding-left: 6px;
        align-content: center;
    }
/*    grid-row has alternating colors, grid-table-row does not*/
    .grid-table-row, .grid-row {
        display: contents;
    }
    .grid-row:nth-of-type(even)>div{
            background-color: white;
    }    
    /* leave room for scroll bar in right column*/
    .grid-right-col {
        padding-right: 16px;;
    }
    .grid-span-all {
        grid-column: 1 / -1;
    }
    .grid-span-2 {
        grid-column: span 2;
    }
    .grid-span-3 {
        grid-column: span 3;
    }
    .required::after {
        content: '*';
    }
    .red-bold {
        color: red;
        font-weight: bold;
    }
    .error {
        color: red;
        font-weight: bold;
    }
    .warning {
        color: orange;
    }
    .dirty {
        font-weight: bold;
        font-style: italic;
    }
    .bold {
        font-weight: bold;
    }
    .centered {
        text-align: center;
    }
    .right {
        text-align: right;
        margin-right: .5rem;
    }
    /* does not work in tables */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /************************************************************************

                        Dynamic fonts

    *************************************************************************/
    .dynamic-font--xlg {
        font-size: clamp(1rem, 1.5vw, 24px);
        overflow: hidden;
    /*
        text-overflow: ellipsis;
        white-space: nowrap;
    */
    }
    .dynamic-font--lg {
        font-size: clamp(.75rem, 1.5vw, 18px);
        overflow: hidden;
    /*
        text-overflow: ellipsis;
        white-space: nowrap;
    */
    }
    .dynamic-font {
        font-size: clamp(.7rem, 1.5vw, 16px);
        overflow: hidden;
    /*
        text-overflow: ellipsis;
        white-space: nowrap;
    */
    }
    .dynamic-font--md {
        font-size: clamp(.7rem, 1.5vw, 15px);
        overflow: hidden;
    /*
        text-overflow: ellipsis;
        white-space: nowrap;
    */
    }
    .dynamic-font--sm {
        font-size: clamp(.6rem, 1.5vw, 12px);
        overflow: hidden;
    /*
        text-overflow: ellipsis;
        white-space: nowrap;
    */
    }
    /************************************************************************

                        Breadcrumb Trail

    *************************************************************************/
    .breadcrumb {
      padding: 0 .5rem;
    }

    .breadcrumb ul {
      display: flex;
      flex-wrap: nowrap;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .breadcrumb li {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 150px;
    }
    .breadcrumb li:not(:first-child)::before {
      display: inline-block;
      margin: 0 .25rem;
      content: "→";
    }

    .label--left {
        text-align: left ;
    }
    .label--right {
        text-align: right ;
    }
    .field-error {
        color: red;
        font-size: smaller;
        margin-left: 6ch;
    }
}