.wd-page-content{
background-color: #FDFDFF !important;
}

.modal-dialog {
  max-width: 700px !important;
}

.gs-add-part{
 background-color: #2d86db !important;
 padding: 0px 28px !important;
 color:#ffffff !important ;
 display: flex;
 gap: 10px !important;  
}

.gs-remove {
 background-color: #e02e2a !important;
 padding: 0px 28px !important;
 color:#ffffff !important ;
 display: flex;
 gap: 10px !important;    
}

.gs-remove-existing-photo{
 background-color: #e02e2a !important;
 color:#ffffff !important ;
 display: flex;
 gap: 10px !important; 
}

.action-btns-parts{
display: flex;
gap: 10px;
align-items: center;
}

.top-bar{
margin-bottom: 25px;
border-bottom: 1px solid black;
}

.top-bar .username{
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}

.username strong{
    color: #2d86db;
}

.top-bar .username p {
margin-bottom: 0px;
}

.top-bar .username_lastseen{
display: flex;
justify-content: end;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}

.username_lastseen strong {
    color: #2d86db;
}

.top-bar .username_lastseen p {
margin-bottom: 0px;
}

.wd-page-title{
    display: none;
}

/* Global Classes  */
.global-page-header{
    padding-top: 35px;
    padding-right: 35px;
    padding-left: 35px;
}

.global-page-content-wrapper{
   padding-top: 35px;
   padding-right: 35px;
   padding-left: 35px;
}

.global-page-header .page-header-title h1{
  font-size: 25px;
  font-weight: bold;
  margin: 0px;
  color: #2d86db;
}

.global-menu-wrapper{
    padding: 35px;
}

/* Global Button Classes */
.generic-form-action-btn{
 border: 1px solid #2d86db !important;
 background-color: unset !important;
 text-transform: none !important;
 padding: 0px 28px !important;
 color:#2d86db !important ;
 gap: 10px !important;
}

.save-form-action-btn{
 background-color: #2d86db !important;
 padding: 0px 28px !important;
 color:#ffffff !important ;
 display: flex;
 gap: 10px !important;  
}

/* Alerts */
.alert{
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
}

.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}

.alert-success{
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}

.modal.show{
  background: #00000030;
}

.modal-backdrop.show {
    opacity: 0;
    z-index: 0 !important;
}

.modal.show .modal-dialog {
    transform: translate(0, 25%);
}

.page-numbers {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0px;
}

.page-numbers li a {
  display: block;
  padding: 5px 12px;
  text-decoration: none;
  border: 1px solid #2d86db;
  color: black;  
  margin: 0 4px;
}

.page-numbers li span {
  display: block;
  padding: 5px 12px;
  text-decoration: none;
  border: 1px solid #2d86db;
  color: black;  
  margin: 0 4px;
}

.page-numbers li span.current {
  background-color: #2d86db;
  color: white;
}

/* TABLE CSS */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgb(0 0 0 / 1%);
}

.motorbike-search-form-search{
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-action-btns{
    gap: 10px;
}

.table-footer-action-btns{
    gap: 10px;
}

.table-action-btn{
    background: #2d86db !important;
    text-transform: unset !important;
    color: #ffffff !important;
    padding: 9px 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: transform 0.2s !important;
}

.gs-parts-toggle{
    background-color: #2d86db !important;
    color: white !important;
}


/* ΔΕΛΤΙΑ ΣΥΝΤΗΡΗΣΗΣ */

.deltia-syntirisis h4{
margin-bottom: 20px;
}

.guarantees-service-preview-row .form-label,
.guarantees-service-preview-row input,
.guarantees-service-preview-row textarea{
 margin-bottom: 10px;
}

.generic-card-wrap{
  margin-top:16px;
}
.generic-card-wrap .card-inner {padding: 0px;}
.generic-card-wrap .card-inner .card-inner-title{
  padding: 10px;
  border-bottom: 3px solid #2d86db;
  font-size: 16px;
  margin-bottom: 0px;
}

.generic-card-create-form{
  padding: 30px;
}

.form-label-check{
    margin-bottom: 20px;
    font-weight: bold;
}

.card-inner-photo-upload{
  padding: 30px;
}

.spare-parts-box-container{
 padding: 30px;
}

/* =========================================================
   Reusable UI Info Table Component
========================================================= */

.table-responsive{
 overflow: visible !important;
}

.ui-info-table {
  border: 1px solid #d6d9df;
  overflow: hidden;
  background: #fff;
}

.ui-info-table__title {
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.ui-info-table__table {
  width: 100%;
  border-collapse: collapse !important;
  table-layout: fixed;
  margin: 0;
}

.ui-info-table__table th,
.ui-info-table__table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid #e2e8f0 !important;
  background: #fff;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.ui-info-table__table th {
  width: 240px;
  font-weight: 700;
  color: #111827;
}

.ui-info-table__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.2px;
  font-weight: 600;
}

/* =========================================================
   Variant: Zebra / Clean Business
========================================================= */

.ui-info-table--zebra .ui-info-table__title {
  background: white;
  border-bottom: 3px solid #2D86DB;
  color: #000;
}

.ui-info-table--zebra .ui-info-table__table th {
  background: #f8fafc !important;
}

.ui-info-table--zebra .ui-info-table__table tr:nth-child(even) th,
.ui-info-table--zebra .ui-info-table__table tr:nth-child(even) td {
  background: #fbfcfe !important;
}

.ui-info-table--zebra .ui-info-table__table tr:hover th,
.ui-info-table--zebra .ui-info-table__table tr:hover td {
  background: #f1f5f9 !important;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 700px) {
  .ui-info-table__table,
  .ui-info-table__table tbody,
  .ui-info-table__table tr,
  .ui-info-table__table th,
  .ui-info-table__table td {
    display: block;
    width: 100%;
  }

  .ui-info-table__table tr {
    margin-bottom: 8px;
  }

  .ui-info-table__table th {
    border-bottom: 0 !important;
    padding-bottom: 6px;
  }

  .ui-info-table__table td {
    padding-top: 0;
  }
}


/* Global Table */
.generic-table tr th{
 text-transform: none !important;
}

.generic-table {
	border-collapse:collapse;
	border-spacing:0;
	-webkit-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
	   -moz-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
			    box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
	margin-bottom:40px;
	margin-top:.5em;	
	width:100%; 
	max-width:100%;
}
.generic-table thead tr {border-bottom:3px solid #2D86DB; color:#000;}
.generic-table tfoot tr {border-top:3px solid #2D86DB;}
.generic-table thead th, table tfoot th {
	background-color:#fff;
	color:#000;
	font-size:.83333em;
	line-height:1.8;
	position:relative;
	text-align:left;
	text-transform:uppercase;	
}
.generic-table tbody tr {background-color:#fff; transition: background-color 0.25s ease, color 0.25s ease;}
.generic-table tbody tr:hover {background-color:#eeeeee8a; color:#000;}
.generic-table th, table td {
	border:1px solid #bfbfbf;
	position:relative;
	vertical-align:middle;
}

.generic-internal-table tr th{
 text-transform: none !important;
}

/* Global internal Table */
.generic-internal-table {
	border-collapse:collapse;
	border-spacing:0;
	-webkit-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
	   -moz-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
			    box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
	margin-bottom:0px;
	width:100%; 
	max-width:100%;
}
.generic-internal-table thead tr {border-bottom:3px solid #2D86DB; color:#000;}
.generic-internal-table tfoot tr {border-top:3px solid #2D86DB;}
.generic-internal-table thead th, table tfoot th {
	background-color:#fff;
	color:#000;
	font-size:.83333em;
	line-height:1.8;
	padding: 10px 14px 10px 14px;
	position:relative;
	text-align:left;
	text-transform:uppercase;	
}
.generic-internal-table tbody tr {background-color:#fff; transition: background-color 0.25s ease, color 0.25s ease;}
.generic-internal-table tbody tr:hover {background-color:#eeeeee8a; color:#000;}
.generic-internal-table th, table td {
	border:1px solid #bfbfbf;
	padding:10px 10px !important;
	position:relative;
	vertical-align:middle;
}

/* =========================================================
   WRAPPER / TABLE (να μην κόβεται το tooltip)
   Βάλε τη σωστή class του wrapper του πίνακα σου
   ========================================================= */
.gs-maintenance-table-wrap{
  position: relative;
  overflow-x: auto;
  overflow-y: visible !important;
  z-index: 1;
}

/* Πολύ σημαντικό για themes που κόβουν μέσα από table cells */
.gs-maintenance-table-wrap table,
.gs-maintenance-table-wrap thead,
.gs-maintenance-table-wrap tbody,
.gs-maintenance-table-wrap tr,
.gs-maintenance-table-wrap th,
.gs-maintenance-table-wrap td{
  overflow: visible !important;
}

/* Αν το theme βάζει relative/hidden σε cell */
.gs-maintenance-table-wrap td:last-child,
.gs-maintenance-table-wrap th:last-child{
  position: relative;
  overflow: visible !important;
}

/* =========================================================
   TABLE / CELL OVERFLOW FIX (σημαντικό)
   Το tooltip κόβεται συνήθως από td / wrapper
   ========================================================= */

/* Βάλε το σωστό selector του table wrapper σου (αν έχεις π.χ. .table-responsive ή .gs-table-wrap) */
.table-responsive,
.gs-table-wrap,
.gs-services-table-wrap {
  overflow-x: auto;       /* κρατάμε οριζόντιο scroll αν χρειάζεται */
  overflow-y: visible !important; /* προσπάθεια να μη κόβεται κάθετα */
  position: relative;
}

/* Table / rows / cells να επιτρέπουν tooltip overflow */
table,
thead,
tbody,
tr,
th,
td {
  overflow: visible !important;
}

/* Καλό είναι τα cells να είναι positioned για σωστό stacking */
td,
th {
  position: relative;
}

/* Όταν κάνεις hover στη σειρά, φέρε τη πάνω από τις άλλες */
tr:hover {
  position: relative;
  z-index: 20;
}

/* =========================================================
   TOOLTIP TRIGGER
   ========================================================= */
.gs-tooltip-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 10;
}

.gs-tooltip-wrap:hover{
  z-index: 99999;
}

.gs-tooltip-trigger{
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #f9fafb;
  color: #374151;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: help;
}

/* =========================================================
   TOOLTIP BOX (default: πάνω από το badge)
   ========================================================= */
.gs-tooltip-content{
  position: absolute;
  bottom: calc(100% + 10px);
  top: auto;
  left: 50%;
  transform: translateX(-50%);

  min-width: 220px;
  max-width: min(340px, calc(100vw - 24px));
  max-height: 220px;

  background: #ffffff;
  color: #111827;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  border: 1px solid #e5e7eb;

  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;

  /* ✅ αν έχει πολλές εργασίες, να κάνει scroll ΜΕΣΑ */
  overflow-y: auto;
  overflow-x: hidden;
}

.gs-tooltip-wrap:hover .gs-tooltip-content{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

/* Βελάκι (tooltip πάνω -> βελάκι κάτω) */
.gs-tooltip-content::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

/* =========================================================
   RIGHT EDGE (τελευταία στήλη)
   ========================================================= */
.gs-tooltip-wrap--right .gs-tooltip-content{
  left: auto;
  right: 0;
  transform: none;
}

.gs-tooltip-wrap--right:hover .gs-tooltip-content{
  transform: translateY(-2px);
}

.gs-tooltip-wrap--right .gs-tooltip-content::before{
  left: auto;
  right: 16px;
  transform: rotate(45deg);
}

/* =========================================================
   LEFT EDGE (αν έχεις badge κοντά αριστερά)
   ========================================================= */
.gs-tooltip-wrap--left .gs-tooltip-content{
  left: 0;
  right: auto;
  transform: none;
}

.gs-tooltip-wrap--left:hover .gs-tooltip-content{
  transform: translateY(-2px);
}

.gs-tooltip-wrap--left .gs-tooltip-content::before{
  left: 16px;
  right: auto;
  transform: rotate(45deg);
}

/* =========================================================
   LIST STYLING (σωστό tooltip list)
   ========================================================= */
.gs-tooltip-list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-tooltip-list li{
  margin: 0;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.4;
  color: #111827;
  white-space: normal;
  word-break: break-word;
}

.gs-tooltip-list li + li{
  border-top: 1px solid #f1f5f9;
}

.gs-tooltip-list li::before{
  content: "•";
  display: inline-block;
  margin-right: 6px;
  color: #6b7280;
}



/* =========================================================
   Fallback plain text
   ========================================================= */
.gs-tooltip-content--text{
  white-space: pre-line;
  line-height: 1.35;
  font-size: 12px;
}

.gs-field-error{
  border: 1px solid #dc2626 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,.15) !important;
}

.gs-error-msg{
  margin-top: 6px;
  font-size: 12px;
  color: #dc2626;
}

input.gs-field-error,
select.gs-field-error,
textarea.gs-field-error {
  border: 2px solid #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}

.gs-error-msg{
  margin-top:6px;
  color:#b91c1c;
  font-size:12px;
}

.gs-group-error{
  border:1px solid #fecaca;        /* light red */
  background:#fff1f2;              /* very soft */
  border-radius:8px;
  padding:10px;
}
.gs-group-error .gs-error-msg{
  margin:0 0 10px;
}

/* group highlight (όχι κάθε checkbox) */
#gs-service-works-wrap.gs-group-error{
  border: 1px solid #fecaca;
  background: #fff1f2;
  border-radius: 10px;
  padding: 10px;
}

.gs-group-error{
  border: 1px solid #ef4444;
  background: rgba(239, 68, 68, 0.06);
  border-radius: 10px;
  padding: 10px;
}
.gs-error-msg{
  color:#b91c1c;
  font-size: 13px;
  margin: 6px 0 8px;
}