:root
{
    --bg-clr:rgb(33, 37, 41);

     --txt-clr:#d1d1d1;
     --bg-clr-alt:rgb(40, 42, 44);
            
    --accent-clr:#ffc107;

    --text-shadow-lg: 3px 3px 1px #000;
    --text-shadow-sm: 3px 3px 1px #000;


    --border-distance:clamp(3px,1vw,20px);

}


html,body,form{height:100%;}
body{background-color:var(--bg-clr);color:var(--txt-clr);display: flex;flex-direction: column;}
form{min-height:100%;display: flex;flex-direction: column;}

a{text-decoration:none;color:var(--accent-clr);text-align:left;}

.bg-clr-alt{background-color: var(--bg-clr-alt);}

.msgAlert{border:solid 1px var(--accent-clr); padding:1rem 2rem; font-size:1rem;color:var(--bg-clr-alt);background-color:var(--accent-clr);margin:0 0 1rem 0;}
.msgError{background-color:var(--accent-clr);color:var(--bg-clr);padding:1rem 2rem;margin:0 0 1rem 0;}
.msgSuccess{border:solid 1px var(--accent-clr); padding:1rem 2rem;font-size:1rem;background-color:var(--accent-clr);margin:0 0 1rem 0;}

.alert-default{border: 1px solid var(--accent-clr); color:var(--accent-clr); margin-bottom:1rem;}
.alert-default h4{color:var(--accent-clr); }

/*header*/
.navbar{background-color: var(--bg-clr);  }
.navbar-brand,navbar-brand:hover{font-size:2rem;color:var(--accent-clr) !important;text-shadow:var(--text-shadow-lg);}
.navbar-nav .nav-link-white{color:var(--accent-clr) !important;text-shadow:var(--text-shadow-sm);}
.navbar-nav .nav-link-active{color:var(--accent-clr) !important;text-shadow:var(--text-shadow-sm);border-bottom:2px solid var(--accent-clr);}


.navbar-toggler{color:var(--accent-clr) !important;}

.dropdown-menu{background-color:var(--bg-clr) !important;color:var(--accent-clr);}
.dropdown-menu a{color:var(--accent-clr);}
.dropdown-menu a:hover{background-color:var(--accent-clr);color:var(--bg-clr) !important;}

.header-profile-img{width:32px;height:auto;border-radius:9999px; filter: sepia(100%);}


 /* table */
table th, td.table-cell {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
table.tbl-auto{table-layout: auto !important;}
tbody, td, tfoot, th, thead, tr {  border-color: inherit;  border-style: none;  border-width: 0;}
td.cell-position{width:4rem;}
td.cell-title{width:auto;}
td.cell-desc{width:auto;}
td.cell-sn{width:6rem; white-space: nowrap}

.table,.table td{background-color:var(--bg-clr);color:var(--txt-clr);width:100%;}
.table thead th{border:0 solid;background-color: var(--bg-clr-alt);color:var(--accent-clr);}
.table-warning{border:1px solid var(--accent-clr);}
.table > tbody > tr:nth-of-type(2n) > * {  background-color: var(--bg-clr-alt);}

.cell-item-title{display:block;text-align:left;width:20rem;  white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;}

h1 {display:inline-block;font-size:clamp(1.75rem,-1.5rem+8vw,3.75rem);color:var(--txt-clr);margin-bottom:0;display:initial;text-shadow: var(--text-shadow-lg);}
h2 {font-size:2.5rem; color:var(--txt-clr);display:inline-block;text-shadow: var(--text-shadow-sm);}
h3 {font-size:1.85rem;text-shadow:var(--text-shadow-sm);}



.header-badge{margin-right:1rem;}

.search-container{}
.search-container input{background-color:var(--bg-clr);color:var(--txt-clr);}
.search-container input::placeholder{color:var(--bg-clr-alt);}

.truncate {  overflow: hidden;  text-overflow: ellipsis;  /*white-space: nowrap;*/  webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 5; /* Specify the number of lines to display */}

/*fp*/
.shade{border:1px solid var(--bg-clr-alt);box-shadow:var(--text-shadow-sm);padding:1rem;}
.fp-profile-img{width:128px;height:auto;border-radius:9999px; filter: sepia(100%);margin:0 auto;}


/*item and forms*/
.breadcrumbs{text-align:left;}
.breadcrumbs a.breadcrumb-link,a.breadcrumb-link:hover {text-decoration:none; font-weight:bold;color:var(--accent-clr);display:inline-block;text-align:left;}

a.btn-link,a.btn-link:hover{text-decoration:none; border:1px solid var(--accent-clr);color:var(--accent-clr);margin-right:0.5rem;}
.btn-save,.btn-save:hover {margin-top:1.5rem;background-color:var(--accent-clr);color:var(--bg-clr);float:right;}
.btn-add,.btn-add:hover { background-color:var(--accent-clr);color:var(--bg-clr);float:right;}
a.tag-link,a.tag-link:hover{text-decoration:none; color:var(--accent-clr);margin:0 0.25rem 0.25rem 0;}
.sort-list-link,.sort-list-link:hover{text-decoration:none; color:var(--accent-clr);font-weight:bold;}
.btn-commit,.btn-commit:hover {background-color:var(--accent-clr);color:var(--bg-clr);}

.nav-pills .nav-link{color:var(--accent-clr);}
.nav-pills .nav-link.active{background-color:var(--txt-clr);color:var(--bg-clr);}

.properties-container {padding: 1rem 0;}
.properties-container .properties-field {    padding: 0.5rem 0;clear:both;}
.properties-container .item-title {    padding: 0.25rem;    width: 100%;}
.properties-container img.img-qr-sml {width:6.5rem;height:auto;}
.properties-container .img-form-profile {width:6.5rem;height:auto;float:right;}
.properties-container a.qr {}
.properties-container h1 {display:inline-block;font-size:clamp(2rem,1rem+7vw,3.75rem);color:var(--txt-clr);margin-bottom:0;}
.properties-container h2 {    margin-top: 1.5rem;font-size:2.125rem; color:var(--txt-clr);display:inline-block;}
.properties-container h3 {    margin-top: 1.5rem;font-size:2rem; color:var(--txt-clr);display:block;}
.properties-container input.text { border: 1px solid var(--txt-clr); padding: 0.5rem;background-color:var(--bg-clr);color:var(--txt-clr); width: 100%;}
.properties-container textarea {    height: 10rem;    padding: 0.5rem;    border: solid 1px var(--txt-clr);  background-color:var(--bg-clr); color:var(--txt-clr);   width: 100%;    resize: none}
.properties-container label {    display: block;    padding: 0.25rem;    width: 100%;    font-weight:600;}
.properties-container label.forCheckbox {        display: inline;        padding: 5px;    }
.properties-container select {    padding: 0.5rem;    width: 100%;    border: 1px solid var(--txt-clr); background-color:var(--bg-clr);color:var(--txt-clr);}
.properties-container input.file {    border: solid 1px var(--txt-clr);    padding: 5px;    margin: 0 0 5px 0; background-color:var(--bg-clr);   width: 100%;}
.properties-container input[type="color"] {    border: solid 1px var(--txt-clr);    padding: 1px;float:right;}
.properties-container input[type="checkbox"] {    float: right;border: solid 1px var(--txt-clr);   background-color:var(--bg-clr);}
.properties-container textarea.text-editor {line-height: 150%; font-size: 1.15rem; resize: none;  width: 100%;padding: 1rem; border:1px solid var(--txt-clr);}
.properties-container img.photo {width:100%;height:auto;margin-bottom:1rem;}
.properties-container img.img-remove {width:10rem;height:auto;}

.content-wrapper{/*white-space:pre-wrap;*/ background-color:var(--bg-clr-alt);padding:1rem;border-radius:0.25rem;}        
.content-wrapper h1 {display:block;font-size:3rem;}



.login-form {}
.login-form .login-form-field {    padding:0 0 0.5rem 0;}
.login-form .login-form-field input.txt { border: 1px solid var(--txt-clr);    padding: 0.5rem;background-color:var(--bg-clr);color:var(--txt-clr);     width: 100%;}
.login-form .login-form-field label {    display: block;    padding: 0.25rem;    width: 100%;    font-weight:600;}




.list-group-item,.list-group-item:hover{color:var(--txt-clr);background-color:var(--bg-clr);}

.list-item{color:var(--txt-clr);border-bottom:1px solid var(--bg-clr-alt);padding:0 0 2rem 0;margin-bottom:4rem;display:block;}
.list-item a.list-item-link{color:var(--txt-clr);display:block;padding-bottom:1rem;}

footer{text-align:center;padding:5rem; margin-top: auto;}



/*grid*/
.card {  border-color:var(--txt-clr);   color:var(--txt-clr);background-color:var(--bg-clr);  margin-bottom:1rem; break-inside:avoid;}
img, .card-img-top { border-radius: 0;}


/* Style for the "dark/light mode toggle" button */
.mode-toggle-wrapper {    position: fixed;    bottom: var(--border-distance);
                          left: var(--border-distance);    z-index: 999;}

#mode-toggle {
    display: inline-block;
    background-color: var(--bg-clr);  
    color: var(--accent-clr);  
    padding: clamp(2px, 1vw, 10px) clamp(4px, 2vw, 20px); /* Adjust padding */
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid var(--accent-clr);
    transition: background-color 0.3s ease;
    font-size: clamp(8px, 1.5vw, 1rem); /* Optional: Adjust font size */
}


#mode-toggle:hover {    color: var(--bg-clr);    background-color:var(--accent-clr);}


/* Style for the "Go to Top" button */
.scroll-to-top {    position: fixed;    bottom:  var(--border-distance);     right:  var(--border-distance);     display: none;    z-index: 999;}
.scroll-btn { display: inline-block; background-color: var(--bg-clr);    color: var(--accent-clr);    padding: clamp(2px, 1vw, 10px) clamp(4px, 2vw, 20px);    border-radius: 5px;   text-decoration: none;
    font-size: clamp(8px, 1.5vw, 1rem); /* Optional: Adjust font size */
    border:1px solid var(--accent-clr); transition: background-color 0.3s ease;}
.scroll-btn:hover {    color: var(--bg-clr);    background-color:var(--accent-clr);}





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

    .properties-container textarea.text-editor {min-height:20rem;height: 20rem;}

      #mode-toggle {
        /* Add any other adjustments for smaller screens here */
    }
}

@media screen and (min-width: 576px) and (max-width:1200px)
{  
/*.cell-item-title{width:14rem;}*/

    .properties-container textarea.text-editor {min-height:25rem;height: 25rem;}
}

@media screen and (min-width: 1280px) 
{  
/*.cell-item-title{width:18rem;}*/

    .properties-container textarea.text-editor {min-height:30rem;height: 30rem;}
}


@media (min-width: 576px) {
  .card-columns {
    column-count: 2;
  }
}

@media (min-width: 768px) {
  .card-columns {
    column-count: 3;
  }
}

@media (min-width: 992px) {
  .card-columns {
    column-count: 4;
  }
}

@media (min-width: 1200px) {
  .card-columns {
    column-count: 5;
  }
}