/******************     style sheet for search in list of projects     ***************************/
#circles {
  font-size:15px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: white;
  background: #429bbc;
  align-content: center;
}

.leftcolumn {
  padding-top: 20px;
  float: left;
  width: 70%;
}
/* Right column */
.rightcolumn {
  padding-top: 20px;
  float: right;
  width: 30%;
  padding-left: 20px;
}

input.search[type=search] {
  width: 300px;
  box-sizing: border-box;
  border: 2px solid #333;
  border-radius: 4px;
  font-size: 15px;
  color: white;
  background-color: #ffffff;
  background-image: url("../img/projectsImage/searchIcon.png");
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input.search[type=search]:focus {
  width: 100%;
}

input[type=file] {
    display: block;
    height: 167px;
    width: 100%;
    background-image: url("../img/projectsImage/allFiles.png");
    background-repeat: no-repeat;
    background-position: center;
}

/******************     style sheet for list of projects     ***************************/
table {
  margin-top: 15px;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th, td {
  border-bottom: 1px solid #ddd;
  font-size: inherit;
  text-align: center;
}

th {
  padding: 15px;
  color: #ffffff!important;
  background-color: #414e57
}

.progress{
  position: relative;
  margin-top:auto;
  height:20px;
  background-color: #414e57;
  display: flex;
  margin-bottom: 20px;
}
.progress-bar-success {
    background-color: #439cbc;
}
.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: #ffffff;
 }

/******************     style sheet for menus of projects     ***************************/

/* Style the tab */
.tab {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #439cbc;
  overflow: hidden;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  width: 33.33333333333333%;
  float: left;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  clear:right;
  color: #363636;
  background-color: #F5F5F5;
  border: none;
  outline: none;
  cursor: pointer;
  border-bottom: 3px solid transparent
}

/* Change background color of buttons on hover */
.tab button:hover {
  border-bottom: 3px #439cbc;
}

.btn-primary {
  background-color: #439cbc!important;
  border-style: none;
}

/* Create an active/current tablink class */
.tab button.active {
  border-bottom: 3px #439cbc;
}

/* Style the tab content */
.tabcontent {
  /*height: 50vh;*/
  padding-bottom: 15px;
  border-top: none;
}

.filterContent {
  /*height: 60vh;*/
  padding-bottom: 15px;
  border-top: none;
  /*overflow-y: scroll;*/
  overflow-x: hidden;
}

.SceneReady{
  margin: 20px 10px;
  height: 100%;
  padding: 20px;
  text-align: left;
  border-style: solid;
  border-width: 2px;
  border-radius: 20px;
  border-color: #e1e1e1;
  background-color: #fafafa;
}
.Successfly{
  width: 100%;
  height: 500px;
  display:flex;
  background-image: url("../img/projectsImage/FilesDone.png");
  background-position: center;
  background-repeat: no-repeat;
}
.addShotEmpty{
  margin: 20px 10px;
  width: 100%;
  height: 574px;
  padding: 20px;
  display:flex;
  border-style: solid;
  border-width: 2px;
  border-radius: 20px;
  border-color: #e1e1e1;
  background-color: #fafafa;
  background-image: url("../img/projectsImage/addIcon.png");
  background-repeat: no-repeat;
  background-position: center;
}

#myImg {
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
  background-color: #e9e9e9;
}

hr {
  display:flex;
  justify-content:center;
  align-items:  center;
  border-style: solid;
  border-width: 2px;
  border-radius: 20px;
  border-color: #e1e1e1;
  width:100%;
  height:2px;
}

textarea {
  width: 100%;
  height: 190px;
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  resize: vertical; /*remove the resize handle on the bottom right*/
}
.card{
    background-color: rgba(27, 27, 27, 0);
    border-radius: 0;
    box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 0%), 0 0 0 1px rgb(10 10 10 / 0%);
    border: 0;
}
.emptyTask{
  font-size: 1.5em;
  text-align: center;
  vertical-align: middle;
  line-height: 35vh;
  margin-top: 10px;
  height: 39vh;
  border-radius: 2px;
  color: #439cbc;
  border-color: #439cbc;
  border-width: 2px;
  border-style: dashed;
}

/* ============================================
   DESKTOP ONLY (Above 767px)
   My Projects Page Layout
   ============================================ */
@media (min-width: 768px) {
    /* Desktop layout - keep as is */
    .leftcolumn {
        padding-top: 20px;
        float: left;
        width: 70%;
    }
    
    .rightcolumn {
        padding-top: 20px;
        float: right;
        width: 30%;
        padding-left: 20px;
    }
}

/* ============================================
   MOBILE & TABLET ONLY (Below 767px)
   My Projects Page: Responsive Layout
   ============================================ */
@media (max-width: 767px) {
    /* Normal order: services first, company info second */
    .container > .row {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Products/Services column - full width, appears on top */
    .leftcolumn {
        width: 100% !important;
        float: none !important;
        padding: 10px 15px !important;
        margin-bottom: 10px !important;
    }
    
    /* Company info column - full width, appears below */
    .rightcolumn {
        width: 100% !important;
        float: none !important;
        padding: 10px 15px !important;
    }
    
    /* Service cards - 2 per row */
    .leftcolumn > div[style*="display: flex"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: space-between !important;
    }
    
    .leftcolumn > div[style*="display: flex"] > div {
        width: calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
        flex-shrink: 0 !important;
    }
    
    /* Reduce spacing in company info sections */
    .rightcolumn h1 {
        font-size: 1.3em !important;
        margin: 10px 0 5px 0 !important;
    }
    
    .rightcolumn h3 {
        font-size: 1.1em !important;
        margin: 8px 0 5px 0 !important;
    }
    
    .rightcolumn h4 {
        font-size: 0.95em !important;
        margin: 5px 0 !important;
    }
    
    .rightcolumn .row {
        margin-bottom: 8px !important;
    }
    
    .rightcolumn .card {
        margin-bottom: 10px !important;
        padding: 8px !important;
    }
    
    /* Adjust images for mobile - max height 100px for logo */
    .rightcolumn img {
        max-width: 120px !important;
        max-height: 100px !important;
        height: auto !important;
        width: auto !important;
        object-fit: contain !important;
    }
    
    /* Statistics cards full width with reduced spacing */
    .DashIcon {
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 8px !important;
    }
    
    /* Reduce SVG line spacing */
    .rightcolumn svg {
        margin: 5px 0 !important;
    }
    
    /* ============================================
       PROJECT PAGE - Tables & Panels for Mobile
       ============================================ */
    
    /* Category headers - full width */
    .category-header {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 8px !important;
        font-size: 1.1em !important;
    }
    
    .category-header h2 {
        font-size: 1.2em !important;
        margin: 0 !important;
    }
    
    /* Accordion buttons - full width */
    .accordionOrders {
        width: 100% !important;
        padding: 10px !important;
        font-size: 0.9em !important;
        text-align: right !important;
    }
    
    /* Panel content - responsive */
    .panel {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Panel rows - card style */
    .panel .row {
        display: block !important;
        padding: 15px !important;
        margin: 10px 0 !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        background: #f9f9f9 !important;
    }
    
    /* Panel columns - full width with labels */
    .panel .row > div {
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 5px 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid #e8e8e8 !important;
    }
    
    .panel .row > div:last-child {
        border-bottom: none !important;
    }
    
    /* Add labels before values */
    .panel .row > div::before {
        content: attr(data-label);
        font-weight: bold;
        color: #666;
        margin-left: 10px;
    }
    
    /* Values alignment */
    .panel .row > div strong,
    .panel .row > div span {
        text-align: left !important;
    }
    
    /* Tables - horizontal scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }
    
    table thead {
        display: table-header-group !important;
    }
    
    table tbody {
        display: table-row-group !important;
    }
    
    table tr {
        display: table-row !important;
    }
    
    table th,
    table td {
        display: table-cell !important;
        padding: 8px !important;
        font-size: 0.85em !important;
    }
}