/*-------------------------------------------*/
/*element targets*/

img{
  /*object-fit: contain;*/
  max-width:100%;
}

h1, h2, h3{
  display:inline-flex;
  font-weight: 500;

  clear:both;
  margin-left:auto;
  margin-right:auto;
}

h1, h2{
  font-family: 'celticg';
}

button{
    min-width:20px;
    font-weight: 900;
    border-radius: 15px;
}

button:hover{
    cursor: pointer;
}

button:active {
    transform: scale(0.99);
}

input:hover, select:hover{
    cursor: pointer;
    background-color: #eeeeee;
}

button:disabled{
   opacity:0;
   cursor: default;
}


/*-------------------------------------------
/*child selector targets*/


/*-------------------------------------------*/
/*class targets*/

.button-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: absolute;
  left: -28px;
  top: 3px;
}

.button-group button {
  display:block;
  color: var(--text-primary, #000000);
  background-color: var(--bg-button, #efefde);
  border: var(--theme-primary, #cc0000) solid 2px;
  border-radius: 15px;
  width: 25px;
  height: 25px;
  font-family: 'celticg', impact;
  font-size: 1.5em;
  font-weight: 700;
  transition: opacity 0.3s ease;
}

/* Initial state for buttons that should be hidden */
.button-group .remove-line,
.button-group .duplicate-line {
  opacity: 0;
  pointer-events: none;
  line-height:16pt;
}

.button-group button.hidden {
  opacity: 0;
  pointer-events: none;
  display:none;
}

.button-group button:first-child {
  opacity: 1; /* Expand button always visible */
  font-stretch: 150%;
  -webkit-text-fill-color: var(--theme-primary-light, #ee0000);
  -webkit-text-stroke: #000000 1px;
}

.button-group.expanded button {
  opacity: 1;
}

.checkbox-wrapper{
   display: inline-block;
   color: var(--text-primary, #000);
   background-color: var(--bg-button, #efefde);
   border: var(--theme-primary, #cc0000) solid 2px;
   border-radius: 15px;
   height: 20px;
   width: 32px;
   margin-left:2px;
   padding-top:5px;
   padding-left:24px;
   text-indent:-15px;
}

.checkbox-wrapper label {
  padding-left: 15px;
  text-indent: -15px;
}

.checkbox-wrapper input[type=checkbox] {
  margin-right:2px;
  vertical-align: top;
}

.checkbox-wrapper:hover{
  cursor: pointer;
  background-color: var(--bg-secondary, #ffffff);
}

.d-line {
  display: flex;
  flex-direction: column;
  min-width:180px;
  max-width: 190px;
  min-height: 38px;
  height: 38px;
  border: var(--theme-primary, #cc0000) solid 2px;
  background-color: var(--bg-button, #efefde);
  border-radius: 15px;
  overflow: hidden;
  padding-bottom: 1px;
  transition: height 0.5s ease;
}

.d-line.expanded {
  height: 86px;
}

.d-line caption{
  height:18px;
}

.d-line span{
  padding:2px;
}

/* Control spans */
.d-line span.option-1-controls,
.d-line span.option-2-controls {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.d-line.expanded span.option-1-controls,
.d-line.expanded span.option-2-controls {
  opacity: 1;
  pointer-events: auto;
}

.d-line caption{
  display:flex;
  align-items:center;
  height:22px;
  width:100%;
}

.d-line span{  
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: flex-start;
  height:22px;
  cursor: default;
  background-color: var(--bg-input, #ffffff);
  transition: opacity 0.3s ease;
}

.d-line span.hidden {
  opacity: 0;
  pointer-events: none;
}


.d-line span input[type=checkbox] {
  width: 16px;
  height: 16px;
  flex-shrink: 0; /* prevent shrinking */
  margin-left:2px;
  margin-right: 2px; /* Reduce space after checkbox */
}


.d-line span input[type=checkbox] + label {
  display:flex;
  justify-content: flex-start;
  gap: 1px;
  align-items: center;
  pointer-events: none;  

    opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
    filter: alpha(opacity=50); /* IE lt 8 */
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    -khtml-opacity: .50; /* Safari 1.x */
    -moz-opacity: .50; /* FF lt 1.5, Netscape */

}

.d-line span input[type=checkbox]:checked + label {  
  pointer-events:auto;
 
    opacity: .99; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
    filter: alpha(opacity=99); /* IE lt 8 */
    -ms-filter: "alpha(opacity=99)"; /* IE 8 */
    -khtml-opacity: .99; /* Safari 1.x */
    -moz-opacity: .99; /* FF lt 1.5, Netscape */

}

input[type=checkbox]:checked ~ .advanced-option {

}

.d-line label{
  display:flex;
  flex-direction:row;
  justify-content: flex-start;
  gap: 1px;
}

.d-line select, .d-line input{
  height:18px;
  background-color: transparent;
}

.d-line select:hover, .d-line input:hover{
  background-color: #eeeeee;
}

.d-line input[type=checkbox]{
  width: 16px;
  height: 16px;
  margin-left: 4px;
}

.d-line select{
  display:table-cell;
  background-color: var(--bg-input, #ffffff);
}

.d-line input[type=number]{
  display:table-cell;
  padding-left:2px;
  background-color: var(--bg-input, #ffffff);
  max-width:32px; 
}

.drop-count, .limiter{
  max-width:18px;
}

.d-line p{
  font-style: italic;
}
.d-count{
  text-align:center;
}
.d-mod{
  min-width:32px;
  max-width:32px;
  text-align:center;
}

.d-type{
  min-width:41px;
  max-width:46px;
}

.expand-line{
  line-height: 15pt;
  font-size: 1.0em;
  transform: rotate(0deg);
  transition: transform 0.5s ease;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.expand-line.expanded {
  transform: rotate(180deg);
}

.expand-icon {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  margin: 0 auto;
  transform: translateY(-2px);
}

.label{
  width:100%;
  height:100%;
  background-color: var(--bg-button, #efefde);
  font-family: Verdana;
  font-size: .8em;
  text-align: center;
  font-weight:600;
  border-radius: 15px 15px 0px 0px;
  color: var(--text-primary, #000);
}

.label:hover{  
  background-color: var(--bg-secondary, #ffffff);
  cursor: text;
}

.label:hover::-webkit-input-placeholder{
   color: #ffffff;
}

.label:hover::-moz-placeholder {
   color: #ffffff;
}
.label:hover:-ms-input-placeholder {
   color: #ffffff;
}

.label:hover:-moz-placeholder {
   color: #ffffff;
}

.line-result{
  display:inline-block;
  background-color: transparent;
  min-width:54px;
  width:54px;
  max-width:54px;
  height:34px;
  text-align:center;
  color: var(--theme-primary, #cc0000);
  background-color: var(--bg-input, #ffffff);
  border: var(--theme-primary, #cc0000) solid 2px;
  font-size:2em;
  font-weight: 700;
  border-radius: 15px;
  -webkit-text-stroke: var(--text-stroke, #000000) 1px;
}

.log-line-total{
    white-space:nowrap;
}

.log-text{  
  display:inline;
  font-size: 1.1em; 
  width:100%;
}

.min-max{
}

.mod-target{
  min-width:56px;
  max-width:59px;
}


.pane{
  width:100%;
  min-height:610px;
}

.pos-neg{
  text-align:center;
  width:20px;
  height:27px;
  border-radius: 0;
}

.radio-wrapper{
  display: flex;
  flex-direction: row;
  border: var(--theme-primary, #cc0000) solid 2px;
  border-radius: 15px;
}

.roll{
    display:inline-block;
    width:54px;
    min-width:40px;
    height:32px;
    color:white;
    background-color: var(--theme-primary-bg, #bb0000);
    border: #ffffff solid 2px;
    border-radius: 15px;
}

.roll:hover{
    background-color: var(--theme-primary-hover, #dd0000);
}

.roll:active{
    background-color: var(--theme-primary-dark, #aa0000);
}

.timestamp{
  font-family: Helvetica;
  font-size: .60em;
}

/*-------------------------------------------*/
/*id targets*/

#add-line{
  position:absolute;
  top:4px;
  left:-28px;
  color: var(--text-primary, #000000);
  border: var(--theme-primary, #cc0000) solid 2px;
  background-color: var(--bg-button, #efefde);
  width:25px;
  height:25px;
  font-size:1.5em;
  font-family: 'celticg' , impact;
  font-weight: 900;
  border-radius: 15px;
  line-height:16pt;
}

#add-line:hover{
  background-color: var(--bg-secondary, #ffffff);
}

#roll-dice, #dice-roll-log{
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 20px;
  cursor:default;
  text-align:center;
  font-family: "celticg";
  font-size:2.00em;
  font-stretch: 150%;
  font-weight: 500;
  -webkit-text-fill-color: var(--theme-primary-light, #ee0000);
  -webkit-text-stroke: #ffffff 1px;
  /*background-image: radial-gradient(circle, rgba(255,255,255,1),rgba(255,255,255,0));*/
}

#clear-log{
  margin-bottom:7px;
  width:70px;
  height:27px;
  color: var(--text-primary, #000000);
  background-color: var(--bg-button, #efefde);
  border: var(--theme-primary, #cc0000) solid 2px;
  border-radius: 15px;
}

#clear-log:hover{
  background-color: var(--bg-secondary, #ffffff);
}

#dice-roller{
  margin-left:auto;
  margin-right:auto; 
  width: 75%;
  max-width: 350px;
}

#dice-roller ul{ 
 list-style:none;
}

#dice-roller li, #dice-roller-header,#dice-roller-footer{
    display: inline-flex; 
    align-items:center;
    justify-content: space-between;
    
    position:relative;
    width:100%;
    white-space:nowrap;   
    margin-bottom: 2px;
}

#dice-roller-header{
  justify-content:flex-start;
  margin-bottom:7px;
}

#dice-roller-footer{
  margin-bottom:30px;
  z-index: 1; /* ensures the footer line is above the LI element when click and drag */
}

/*  DICE DESCRIPTION TABLE ON MAIN PAGE  */
#dice-table{
 font-size:1.1em;
 max-width:700px;
 margin-left:auto;
 margin-right:auto;
 color: var(--text-primary, black);
 background-color: var(--bg-input, #ffffff);
 border: var(--theme-primary, #cc0000) solid 2px;
 border-radius: 15px;
}

#dice-table caption{
  padding:5px;
  font-size: 1.2em;
  font-weight:700;
  background-color: var(--bg-button, #efefde);
  border-bottom: var(--theme-primary, #cc0000) solid 1px;
  border-radius: 15px 15px 0px 0px;
    opacity: .85; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
    filter: alpha(opacity=85); /* IE lt 8 */
    -ms-filter: "alpha(opacity=85)"; /* IE 8 */
    -khtml-opacity: .85; /* Safari 1.x */
    -moz-opacity: .85; /* FF lt 1.5, Netscape */

}

#dice-table th{
  min-height: 1.3em;
  font-size:2.25em;
  font-stretch: 150%;
  font-weight: 500;
  -webkit-text-fill-color: var(--theme-primary-light, #ee0000);
  -webkit-text-stroke: var(--text-stroke, #000000) 1px;
  padding:2px;
  border-bottom: var(--theme-primary, #cc0000) 1px solid;
  padding-top: 12px;
  width:100%;
  text-align:center;
}

#dice-table td:first-child{
  margin: auto;
  min-width:100px;
}

#dice-table td:nth-child(2){
  margin:auto;
  min-width:100px;
}


#dice-table tr{
  display:flex;
  flex-direction: row;
  padding:5px;
}

#dice-table tr > td:first-child{
  text-align:center;
}

#dice-table tr > td:first-child h3{
  font-family: 'celticg';
  font-size: 1.4em;
}

/*  END OF DICE DESCRIPTION TABLE ON MAIN PAGE  */

#expand-all {
  color: var(--bg-button, #efefde);
  background-color: #000000;
  position:absolute;
  left:-28px;
  border: var(--theme-primary, #cc0000) solid 2px;
  border-radius: 15px;
  width: 26px;
  height: 26px; 
  font-family: 'celticg', impact;
  font-size: 1.0em;
  font-weight: 900;
  margin-right: 5px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}

#expand-all .expand-icon {
  filter: brightness(0) invert(1);
}

#expand-all:hover {
  cursor: pointer;
}

#expand-all.expanded {
  transform: rotate(180deg);
}

#log-list{
 display: flex;
 flex-direction: column;
 list-style:none;
 width:80%;
 max-width:350px;
 min-height: 600px;
 height: 600px;
 max-height: 1200px;
 margin-left:auto;
 margin-right:auto;
 padding-right: 5px;
 padding-left: 5px;
 overflow-y: auto;
 overflow-x: hidden; 
 resize: vertical;

 color: var(--text-primary, black);
 background-color: var(--bg-button, #efefde);
 border: var(--theme-primary, #cc0000) solid 2px;
 border-radius: 15px;
 
    opacity: .85; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
    filter: alpha(opacity=85); /* IE lt 8 */
    -ms-filter: "alpha(opacity=85)"; /* IE 8 */
    -khtml-opacity: .85; /* Safari 1.x */
    -moz-opacity: .85; /* FF lt 1.5, Netscape */
}

#pane-wrapper{
  width:100%;
  display:flex;
  flex-direction: row;
  justify-content: center;
}

#roll-all{
  position:absolute;
  top:7px;
  right:0;
  width:54px;
  height:54px;
  border:white solid 2px;
  text-align: center;
  color: white;
  background-color: var(--theme-primary-bg, #bb0000);
  border-radius: 15px;
}

#roll-all:hover {
  background-color: var(--theme-primary-hover, #dd0000);
}

#roll-all:active {
  background-color: var(--theme-primary-dark, #aa0000);
}

/*-------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 900px)
{

    #dice-roller{ 
      margin-left:auto;
      margin-right:auto;
      padding-left:28px;  
      width:325px;
    }

    #log-list{
        width:40vw;
        max-width:80%;
    }    

}

/*-------------------------------------------------------------------------------------------------------------------------------------*/
/*tablet and mobile landscape view) */
@media screen and (max-width: 640px) {


    .d-line span{  
      justify-content: flex-start;
      align-items: center;
    }
    
    .option-1-controls:last-child,
    .option-2-controls:last-child{
      
    }

    .pane{
      min-height:60px;
      padding-bottom:20px;
    }
    
    .button-group button{
        width:28px;
        height: 27px;
    }
    
    #add-line{
        width:28px;
        height: 27px;
    }
 
    #dice-roller{
      margin-bottom:20px;
    }    

    #dice-table th:first-child{
      min-width:60px;
    }

    #dice-table td:first-child{
      margin: auto;
      min-width:60px;
    }

    #expand-all {
      left:-27px;
    }
    
    #log-list{
        width:325px;
        max-width:80%;
    }    

    #pane-wrapper{
      flex-direction: column;
    }
}
/*tablet and mobile portrait view*/
@media screen and (max-width: 480px) {    

    #dice-roller{ 
      max-width:90%
    }
            
    #log-list{ 
      min-height: 380px;
      height: 380px;
      max-height: 760px;
    }
    
}

@media screen and (max-width: 360px) {    
  .d-line{
    min-width:170px;
  }

  #dice-roller{
    margin: 0;
  }

}
/*-------------------------------------------*/
/*Click and drag*/

#dice-roller li { 
  /*cursor: grab;*/
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

#dice-roller li.dragging {
  opacity: 0.8;
  background-color: #f0f0f0;
  z-index: 1000;
}

#dice-roller li:active{
  /*cursor: grabbing;*/
}

#dice-roller li.drag-over {
  position: relative;
  border: white solid 1px;
}

#dice-roller li.drag-over::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 42px; /* Match the height of a dice line */
  margin-top: -42px;
  border: 2px dashed var(--theme-primary, #cc0000);
  background-color: rgba(204, 0, 0, 0.1);
  z-index: 999;
}

/* Add placeholder for dropping at the end of the list */
#dice-list.drag-over-end::after {
  content: '';
  display: block;
  height: 42px;
  margin: 2px 0;
  border: 2px dashed var(--theme-primary, #cc0000);
  background-color: rgba(204, 0, 0, 0.1);
}