@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

* {
    box-sizing: border-box;
    user-select: text;
}

body {
    /* font-family: 'Open Sans', Arial, Verdana, sans-serif; */
    margin: 0;
}

.order-form {
    padding: 0.35rem;
    border: 4px dashed #a89438;
}


table {
  border: 1px solid #dddddd45;
  border-collapse: collapse;
}


:root {
  --buy-brown: #291b00;
  --sell-green: #09331f;
  --buy-brown-text:#a87f30;
  --sell-green-text:#2d923f;  
  
  --status-td-green: #0f2009;
  --status-td-brown: #190d00;
  --status-td-light-brown: #341a00;
  --status-td-dark-blue: #152528;
  --status-td-light-blue: #27494e;
  --status-td-red: #ba5b48;
  --status-td-maroon: #4a2222;
  --status-td-credit-blue: #172846;
  --status-td-buy-green: #291b00;
  --status-td-sell-brown: #09331f;
  --status-td-hover: oklch(0.89 0.06 262.87 / 0.35);
  --status-td-yellow: #4a3d22;
  --status-td-pl-green: #38481d;

  --trades-table-template-columns: 1.15fr 1fr 0.65fr 0.70fr 1fr 0.70fr 1fr 1fr 1fr 1fr;
}

.gold-asset-label {
    background-color: #806300;
}
.gold-future-asset-label {
    background-color: #534c36;
}

.btn-new-trade-bg {
    background-color: #653a3a;    
}

.maroon {
    background-color: var(--status-td-maroon);
}


.status-table td {
    padding: 0.25rem;
    white-space: nowrap;
    border: 1px solid #dddddd45;
    vertical-align: center;    
}
.grid-table td {
    padding: 0.25rem;
    white-space: nowrap;
    border: 1px solid #dddddd45;
    vertical-align: bottom;    
}
.trades-table td {
    padding: 0;
    white-space: nowrap;
    border: 1px solid #dddddd45;
    vertical-align: bottom;
    grid-row: var(--order);
    height: var(--row-height);
    padding: 0.125rem 0.25rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}
.trades-table tr {
    display: contents;
    visibility: var(--visibility,visible);
}
.trades-table th {
    background-color: var(--status-td-dark-blue);
    width: 100%;
    text-align: start;    
}
.status-table, .grid-table, .trades-table, .open-orders-table {
    .double {
        border-top: 0.15rem solid;
        border-bottom: 0.25rem double;
    }
    .hover {
        background-color: var(--status-td-hover) !important;
    }
    .right {
        text-align: right;
        justify-content: flex-end !important;
    }
    .green {
        background-color: var(--status-td-green);
    }
    .brown {
        background-color: var(--status-td-brown);
    }
    .light-brown {
        background-color: var(--status-td-light-brown);
    }
    .dark-blue {
        background-color: var(--status-td-dark-blue);
    }
    .light-blue {
        background-color: var(--status-td-light-blue);
    }
    .red {
        background-color: var(--status-td-red);
    }
    .maroon {
        background-color: var(--status-td-maroon);
    }
    .credit-blue {
        background-color: var(--status-td-credit-blue);
    }
    .buy-green {
        background-color: var(--status-td-buy-green);
    }
    .sell-brown {
        background-color: var(--status-td-sell-brown);
    }
    .yellow {
        background-color: var(--status-td-yellow);        
    }
    .pl-green {
        background-color: var(--status-td-pl-green);        
    }    
}

.trades-table-w {
    max-width:  1200px;
    min-width:  800px;
}

.trades-table tbody {
    display:       grid;
    justify-items: start;
    grid-template-columns: var(--trades-table-template-columns);
    top: calc(var(--offset)*var(--row-height));
    position: relative;    
}

.trades-table-scroller {    
    overflow: hidden auto;
    height: 60vh;
    flex-shrink: 0;
}

.trades-table thead tr {
    display:       grid;
    justify-items: start;
    grid-template-columns: var(--trades-table-template-columns);
}



/* button { */
/*     border: 0; */
/*     background-color: inherit; */
/*     cursor: pointer; */
/*     font-family: inherit; */
/*     color: inherit; */
/*     outline: none; */
/*     outline-color: none; */
/*     user-select: none; */
/*     -webkit-tap-highlight-color: transparent; */
/* } */


/* .open-orders-table thead { */
/*     display: grid; */
/*     justify-items: start; */
/*     grid-template-columns: 1fr 1fr 1fr 1fr; */
/* } */

/* .open-orders-table tbody { */
/*     display: grid; */
/*     grid-template-columns: 1fr 1fr 1fr 1fr; */
/* } */

.open-orders-table td, th {
    padding: 0.25rem;
    white-space: nowrap;
    border: 1px solid #dddddd45;
    text-align: left;
    /* vertical-align: bottom;     */
}

/* .open-orders-table th { */
/*     @apply text-xs !px-[0.45rem]; */
/* } */


.number-table {
    td {        
        border: 1px solid #dddddd45;
        border-collapse: collapse;
        padding: 0.20rem 0.45rem;        
    }
    td.number {        
        text-align: right;            
    }
    .red {
        color: #ba5b48;
    }
    .sell-color {
        color: #24b06d;
    }
    .buy-color {
        color: #be8f2c;        
    }
    .number-label {
        background-color: #3e3e3e42;
    }
    .sum {    
        border-top: 0.15rem solid #ffffff42;
        border-bottom: 0.25rem double #ffffff42;
    }
    td.nowrap {
        white-space: nowrap;
    }
}


.calendar {
    font-size: 0.85rem;
    border: 1px solid #dddddd45;
    border-collapse: collapse;
    width: 100%;
    max-width: 40rem;
}


.calendar tr {
    height: 12vw;
    max-height: 6rem;
}

.calendar td {
    width: 12vw;
    max-width: 6rem;    
    vertical-align: top;
    padding: 0.125rem;
    border: 1px solid #dddddd45;
}

.calendar td.sun {
    color: #ba5b48;
}

.calendar tr.head td div {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
}