/* KMoto Service Plus Styles (centered layout + centered modal) */

.km-wrap{

  width:100%;

  max-width:none;     /* no width limits */         /* centers the whole Service List area */

  margin: 40px auto;

  padding: 0 16px;

}



.km-card{

  background:#0d1420;

  border-radius:14px;

  box-shadow:0 10px 30px rgba(0,0,0,.35);

  border:1px solid rgba(255,255,255,.06)

}



.km-toolbar{display:flex;gap:10px;align-items:center;padding:16px}

.km-title{font-size:20px;font-weight:700;color:#dbe4ff;margin-right:auto}



.km-btn{

  background:#ef4444;color:#fff;border:0;border-radius:10px;font-weight: 600;

  padding:10px 14px;cursor:pointer;transition:all .2s

}

.km-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(239,68,68,.25)}



.km-toolbar .km-chip,

.km-chip {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  /* keep backgrounds as you have them */

  background: #121a29;        /* base chip background (unchanged) */

  color: #fff;                 /* stronger contrast to match button */

  border: 0;                   /* no border, like .km-btn */

  border-radius: 10px;         /* same radius as .km-btn */

  padding: 10px 14px;          /* same padding as .km-btn */

  font-weight: 600;            /* same weight as .km-btn */

  line-height: 1;

  cursor: pointer;

  text-decoration: none;       /* remove underline for <a> chips */

  box-shadow: 0 6px 18px rgba(36,72,240,.25);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;

}



.km-toolbar .km-chip:hover,

.km-chip:hover {

  transform: translateY(-1px);

  box-shadow: 0 8px 22px rgba(36,72,240,.35);

}



.km-toolbar .km-chip:focus,

.km-chip:focus {

  outline: 0;

  box-shadow: 0 0 0 3px rgba(36,72,240,.35);

}

.km-toolbar .km-chip:active,

.km-chip:active {

  transform: translateY(0);

  box-shadow: 0 4px 12px rgba(36,72,240,.25);

}



/* Active state keeps the chip’s own active background (your blue) */

.km-toolbar .km-chip.active,

.km-chip.active {

  background: #2448f0;        /* your existing active color */

  color: #fff;

  box-shadow: 0 8px 22px rgba(36,72,240,.45);

}



.km-table{width:100%;border-collapse:separate;border-spacing:0 12px;padding:16px}



/* your wider grid */

.km-row{

  background:#0f1928;color:#d7e0ee;border:1px solid rgba(255,255,255,.08);

  border-radius:12px;display:grid;

  grid-template-columns:120px 120px 120px 120px 120px 140px 1fr 1fr 160px;

  gap:12px;align-items:center;padding:12px 16px

}



.km-badge{padding:4px 10px;border-radius:999px;font-size:12px;display:inline-block}

.km-badge.low{background:#16331b;color:#8de28a}

.km-badge.medium{background:#2a2b18;color:#ffde66}

.km-badge.high{background:#3a171b;color:#ff8590}



.km-actions a{

  display:inline-block;margin-right:8px;background:#1a2539;

  border:1px solid rgba(255,255,255,.08);color:#dbe4ff;

  padding:6px 10px;border-radius:8px;text-decoration:none

}

.km-actions a:hover{background:#22314a}



/* Action buttons */

.km-actions a.km-edit,

.km-actions a.km-delete{

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 8px 12px;         /* a bit larger than table default */

  border-radius: 10px;

  border: 0;                 /* override previous border */

  font-weight: 600;          /* requested weight */

  color: #fff;               /* white text */

  text-decoration: none;

  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;

}



/* Edit = blue */

.km-actions a.km-edit{

  background: #2448f0;

  box-shadow: 0 6px 18px rgba(36,72,240,.25);

}

.km-actions a.km-edit:hover{

  transform: translateY(-1px);

  box-shadow: 0 8px 22px rgba(36,72,240,.35);

}

.km-actions a.km-edit:active{

  transform: translateY(0);

  box-shadow: 0 4px 12px rgba(36,72,240,.25);

}



/* Delete = red */

.km-actions a.km-delete{

  background: #ef4444;

  box-shadow: 0 6px 18px rgba(239,68,68,.25);

}

.km-actions a.km-delete:hover{

  transform: translateY(-1px);

  box-shadow: 0 8px 22px rgba(239,68,68,.35);

}

.km-actions a.km-delete:active{

  transform: translateY(0);

  box-shadow: 0 4px 12px rgba(239,68,68,.25);

}



/* --- Modal (centered) --- */

.km-modal-backdrop{

  position:fixed;inset:0;background:rgba(0,10,25,.55);

  display:none;                       /* hidden by default */

  align-items:center;justify-content:center; /* center children */

  padding-top: 5%;

  z-index:9999;

}

.km-modal-backdrop.km-open{display:flex !important}  /* show + keep centered */



.km-modal{

  width:min(890px,92vw);background:#0d1420;

  border:1px solid rgba(255,255,255,.1);border-radius:16px;

  box-shadow:0 18px 50px rgba(5,10,20,.7);margin:0 auto

}

.km-modal header{

  display:flex;justify-content:space-between;align-items:center;

  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);

  color:#dbe4ff;font-weight:700

}

.km-modal .km-body{padding:18px}

.km-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.km-grid label{color:#b6c2d6;font-size:13px}

.km-field{

  background:#0a1220;border:1px solid rgba(255,255,255,.1);

  border-radius:10px;color:#e6edff;padding:10px;width:100%

}

.km-textarea{min-height:110px}

.km-modal footer{

  display:flex;justify-content:flex-end;gap:10px;

  padding:14px 18px;border-top:1px solid rgba(255,255,255,.06)

}

.km-btn.secondary{background:#1a2539}

.km-center{display:flex;justify-content:center}



/* Responsive: stack grid on small screens */

@media (max-width: 980px){

  .km-row{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(20px,auto)}

  .km-grid{grid-template-columns:1fr}

}



/* Status badges */

.km-status{

  display:inline-block;

  padding:6px 12px;

  border-radius:999px;

  font-size:12px;

  line-height:1;

  font-weight:600;

  letter-spacing:.2px;

  border:1px solid rgba(255,255,255,.08);

}



/* Scheduled = blue */

.km-status.scheduled{

  background:rgba(36,72,240,.12);

  color:#9fb4ff;

  border-color:rgba(36,72,240,.25);

}



/* Completed = green */

.km-status.completed{

  background:rgba(16,185,129,.12);

  color:#86f5c8;

  border-color:rgba(16,185,129,.25);

}



/* In Progress = yellow */

.km-status.in-progress{

  background:rgba(255,223,102,.14);

  color:#ffe88a;

  border-color:rgba(255,223,102,.28);

}



/* On Hold = red */

.km-status.on-hold{

  background:rgba(239,68,68,.14);

  color:#ff9aa0;

  border-color:rgba(239,68,68,.28);

}


/* Enhancements toolbar (non-intrusive) */
.km-enhance-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:12px 16px 6px;}
.km-enhance-toolbar .km-input,.km-enhance-toolbar .km-select{background:#0a1220;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#e6edff;padding:10px;min-width:240px;outline:none;}
.km-enhance-toolbar .km-input::placeholder{color:#7f8baa}
.km-enhance-toolbar .km-input:focus,.km-enhance-toolbar .km-select:focus{box-shadow:0 0 0 3px rgba(36,72,240,.28);}
.km-enhance-toolbar .km-sorts{display:flex;gap:.5rem;}
.km-enhance-count{margin-left:auto;opacity:.7}
#km-empty{padding:1rem;border:1px dashed rgba(255,255,255,.18);border-radius:12px;margin:8px 16px 0 16px;opacity:.85;}