*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f5f7fb;color:#172033}
.hidden{display:none!important}

.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#0f172a,#1e293b)
}

.login-card{
  width:420px;
  max-width:92%;
  background:#fff;
  padding:42px;
  border-radius:24px;
  box-shadow:0 25px 70px rgba(0,0,0,.28)
}

.brand{font-size:28px;font-weight:800;color:#2563eb}
.login-card h1{margin:14px 0 8px}
.login-card p{color:#64748b;margin-bottom:26px}

label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin:14px 0 7px
}

input{
  width:100%;
  padding:13px 14px;
  border:1px solid #dbe2ea;
  border-radius:11px;
  font-size:14px;
  outline:none
}

input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.1)
}

button{border:0;cursor:pointer}

.login-card button{
  width:100%;
  margin-top:18px;
  padding:13px 18px;
  background:#2563eb;
  color:#fff;
  border-radius:11px;
  font-weight:700
}

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

.app{display:flex;min-height:100vh}

.sidebar{
  width:240px;
  background:#111827;
  color:#fff;
  padding:26px 18px;
  display:flex;
  flex-direction:column
}

.side-brand{color:#fff;margin-bottom:28px}

.sidebar nav{
  display:flex;
  flex-direction:column;
  gap:8px
}

.nav{
  background:transparent;
  color:#cbd5e1;
  text-align:left;
  padding:12px 14px;
  border-radius:10px;
  font-weight:600
}

.nav.active,.nav:hover{
  background:#1f2937;
  color:#fff
}

.logout{
  margin-top:auto;
  background:#7f1d1d;
  color:#fff;
  padding:12px;
  border-radius:10px
}

.main{flex:1;padding:28px}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:26px
}

.topbar h2{margin:0;font-size:27px}
.topbar span{color:#64748b;font-size:13px}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:22px
}

.stat{
  background:#fff;
  padding:22px;
  border-radius:16px;
  box-shadow:0 4px 18px rgba(15,23,42,.06)
}

.stat span{
  display:block;
  color:#64748b;
  font-size:13px
}

.stat strong{
  display:block;
  font-size:22px;
  margin-top:8px
}

.stat .ok{color:#16a34a}

.panel{
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 18px rgba(15,23,42,.06);
  overflow:hidden
}

.panel-head{
  padding:20px;
  border-bottom:1px solid #eef2f7
}

.welcome{
  padding:20px;
  color:#475569
}

@media(max-width:800px){
  .sidebar{width:76px}
  .sidebar .brand,.sidebar .nav{font-size:0}
  .main{padding:16px}
  .stats{grid-template-columns:1fr}
}

.categories-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.categories-head h3{
  margin:0 0 4px;
}

.muted{
  color:#64748b;
  font-size:13px;
}

.primary-small,
.secondary-small{
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
}

.primary-small{
  background:#2563eb;
  color:#fff;
}

.secondary-small{
  background:#e5e7eb;
  color:#111827;
}

.category-form-wrap{
  padding:20px;
  border-bottom:1px solid #eef2f7;
}

.category-form{
  display:grid;
  grid-template-columns:2fr 1fr auto;
  gap:14px;
  align-items:end;
}

.category-actions{
  display:flex;
  gap:8px;
}

.categories-table{
  padding:0 20px 20px;
}

.category-row{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:18px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid #eef2f7;
}

.empty-state{
  padding:24px 0;
  color:#64748b;
}

.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#dcfce7;
  color:#166534;
  font-size:12px;
  font-weight:700;
}

@media(max-width:800px){
  .category-form,
  .category-row{
    grid-template-columns:1fr;
  }

  .categories-head{
    align-items:flex-start;
    flex-direction:column;
  }
}

.category-row{
  grid-template-columns:2fr .8fr .7fr 1fr;
}

.category-row-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.status-btn,
.delete-btn{
  padding:8px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
}

.status-btn{
  background:#e0e7ff;
  color:#3730a3;
}

.delete-btn{
  background:#fee2e2;
  color:#b91c1c;
}

.badge-off{
  background:#f1f5f9;
  color:#64748b;
}

@media(max-width:800px){
  .category-row{
    grid-template-columns:1fr;
  }

  .category-row-actions{
    justify-content:flex-start;
  }
}

.product-form{
  display:grid;
  grid-template-columns:2fr 1.2fr 1fr;
  gap:14px;
  align-items:end;
}

.product-desc{
  grid-column:1/3;
}

.product-form select{
  width:100%;
  padding:13px 14px;
  border:1px solid #dbe2ea;
  border-radius:11px;
  background:white;
}

.product-row{
  display:grid;
  grid-template-columns:2fr 1fr .8fr .7fr 1.2fr;
  gap:18px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid #eef2f7;
}

@media(max-width:900px){

  .product-form,
  .product-row{
    grid-template-columns:1fr;
  }

  .product-desc{
    grid-column:auto;
  }
}

.product-main{
  display:flex;
  align-items:center;
  gap:12px;
}

.product-thumb{
  width:64px;
  height:64px;
  border-radius:12px;
  object-fit:cover;
  background:#f1f5f9;
}

.product-sizes{
  margin-top:5px;
  font-size:12px;
  font-weight:700;
  color:#334155;
}

.product-image-preview{
  margin-top:12px;
}

.product-image-preview img{
  width:140px;
  height:105px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
}

#productImageFile{
  width:100%;
  padding:11px;
  border:1px solid #dbe2ea;
  border-radius:11px;
  background:#fff;
}


.edit-btn{
  padding:8px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  background:#dbeafe;
  color:#1d4ed8;
}


.order-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:18px 20px;
  border-bottom:1px solid #eef2f7;
}

.order-filter{
  padding:8px 13px;
  border-radius:9px;
  background:#f1f5f9;
  color:#475569;
  font-weight:700;
  font-size:12px;
}

.order-filter.active{
  background:#2563eb;
  color:#fff;
}

.orders-table{
  padding:0 20px 20px;
}

.order-row{
  display:grid;
  grid-template-columns:.8fr 1.4fr .7fr .8fr .9fr 1.5fr;
  gap:16px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid #eef2f7;
}

.order-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}

.order-status-select{
  padding:8px;
  border:1px solid #dbe2ea;
  border-radius:8px;
  background:#fff;
}

.order-status{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.status-new{
  background:#dbeafe;
  color:#1d4ed8;
}

.status-preparing{
  background:#fef3c7;
  color:#92400e;
}

.status-ready{
  background:#dcfce7;
  color:#166534;
}

.status-on_the_way{
  background:#e0e7ff;
  color:#3730a3;
}

.status-completed{
  background:#d1fae5;
  color:#065f46;
}

.status-cancelled{
  background:#fee2e2;
  color:#991b1b;
}

.order-modal-card{
  max-width:760px;
}

.order-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:20px 0;
}

.order-detail-grid > div{
  padding:12px;
  background:#f8fafc;
  border-radius:10px;
}

.order-detail-grid span{
  display:block;
  color:#64748b;
  font-size:12px;
  margin-bottom:4px;
}

.order-detail-section{
  border-top:1px solid #e2e8f0;
  padding-top:16px;
  margin-top:16px;
}

.order-item{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid #eef2f7;
}

.order-totals{
  margin-top:20px;
}

.order-totals > div{
  display:flex;
  justify-content:space-between;
  padding:7px 0;
}

.order-total-final{
  border-top:2px solid #0f172a;
  margin-top:8px;
  padding-top:12px!important;
  font-size:18px;
}

@media(max-width:1000px){

  .order-row{
    grid-template-columns:1fr 1fr;
  }

  .order-actions{
    justify-content:flex-start;
  }

}

@media(max-width:650px){

  .order-row,
  .order-detail-grid{
    grid-template-columns:1fr;
  }

}

.accept-order-btn,
.reject-order-btn{
  padding:8px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.accept-order-btn{
  background:#dcfce7;
  color:#166534;
}

.reject-order-btn{
  background:#fee2e2;
  color:#991b1b;
}

.accept-order-btn:hover{
  background:#bbf7d0;
}

.reject-order-btn:hover{
  background:#fecaca;
}


.new-order-popup{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.78);
  backdrop-filter:blur(4px);
}

.new-order-popup.hidden{
  display:none;
}

.new-order-card{
  width:min(520px,100%);
  background:#fff;
  border-radius:24px;
  padding:30px;
  box-shadow:0 25px 80px rgba(0,0,0,.35);
}

.new-order-alert-title{
  text-align:center;
  font-size:26px;
  font-weight:900;
  color:#dc2626;
  letter-spacing:.5px;
}

.new-order-number{
  text-align:center;
  font-size:34px;
  font-weight:900;
  color:#0f172a;
  margin-top:10px;
}

.new-order-customer{
  text-align:center;
  font-size:18px;
  color:#475569;
  margin:4px 0 22px;
}

.new-order-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.new-order-info-grid > div{
  background:#f8fafc;
  border-radius:14px;
  padding:15px;
}

.new-order-info-grid span{
  display:block;
  color:#64748b;
  font-size:12px;
  margin-bottom:4px;
}

.new-order-info-grid strong{
  font-size:18px;
}

.prep-time-box{
  margin-top:24px;
}

.prep-time-box label{
  display:block;
  font-weight:800;
  margin-bottom:10px;
}

.prep-time-options{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.prep-time-btn{
  padding:13px 6px;
  border-radius:10px;
  background:#f1f5f9;
  color:#334155;
  font-weight:800;
}

.prep-time-btn.active{
  background:#2563eb;
  color:#fff;
}

.new-order-actions{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:10px;
  margin-top:26px;
}

.popup-reject-btn,
.popup-accept-btn{
  min-height:54px;
  border-radius:12px;
  font-weight:900;
  font-size:15px;
}

.popup-reject-btn{
  background:#fee2e2;
  color:#991b1b;
}

.popup-accept-btn{
  background:#16a34a;
  color:#fff;
}

.popup-accept-btn:disabled{
  opacity:.6;
}

@media(max-width:600px){

  .new-order-card{
    padding:22px;
  }

  .prep-time-options{
    grid-template-columns:1fr 1fr;
  }

  .new-order-actions{
    grid-template-columns:1fr;
  }
}


.order-countdown{
  display:inline-block;
  margin-top:7px;
  padding:6px 9px;
  border-radius:8px;
  background:#fef3c7;
  color:#92400e;
  font-size:13px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.order-countdown.expired{
  background:#fee2e2;
  color:#b91c1c;
  animation:orderExpiredPulse 1s infinite;
}

@keyframes orderExpiredPulse{
  0%,100%{opacity:1;}
  50%{opacity:.55;}
}


.order-countdown.expired{
  background:#fee2e2;
  color:#b91c1c;
  font-weight:900;
  animation:orderExpiredPulse .8s infinite;
  box-shadow:0 0 0 0 rgba(220,38,38,.35);
}

@keyframes orderExpiredPulse{
  0%{
    opacity:1;
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(220,38,38,.35);
  }

  50%{
    opacity:.55;
    transform:scale(1.04);
    box-shadow:0 0 0 8px rgba(220,38,38,0);
  }

  100%{
    opacity:1;
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(220,38,38,0);
  }
}


.ready-order-btn,
.way-order-btn,
.complete-order-btn{
  padding:8px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.ready-order-btn{
  background:#dcfce7;
  color:#166534;
}

.way-order-btn{
  background:#e0e7ff;
  color:#3730a3;
}

.complete-order-btn{
  background:#0f172a;
  color:#fff;
}

.delivery-countdown{
  display:inline-block;
  margin-top:7px;
  padding:6px 9px;
  border-radius:8px;
  background:#e0e7ff;
  color:#3730a3;
  font-size:13px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.delivery-countdown.expired{
  background:#fee2e2;
  color:#b91c1c;
  animation:orderExpiredPulse .8s infinite;
}



/* ===== SERVELIO DELIVERY FLOW V1 ===== */

.ready-order-btn,
.way-order-btn,
.complete-order-btn{
  padding:8px 12px;
  border:none;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

.ready-order-btn{
  background:#dcfce7;
  color:#166534;
}

.way-order-btn{
  background:#e0e7ff;
  color:#3730a3;
}

.complete-order-btn{
  background:#0f172a;
  color:#fff;
}

.delivery-countdown{
  display:inline-block;
  margin-top:7px;
  padding:6px 9px;
  border-radius:8px;
  background:#e0e7ff;
  color:#3730a3;
  font-size:13px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.delivery-countdown.expired{
  background:#fee2e2;
  color:#b91c1c;
  animation:orderExpiredPulse .8s infinite;
}



/* ===== SERVELIO COURIER DELIVERY UI V1 ===== */

.courier-detail-section{
  border-top:1px solid #e2e8f0;
  margin-top:20px;
  padding-top:18px;
}

.courier-detail-section h3{
  margin:0 0 14px;
}

.courier-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.courier-detail-grid > div{
  padding:13px;
  border-radius:11px;
  background:#f8fafc;
}

.courier-detail-grid span{
  display:block;
  color:#64748b;
  font-size:12px;
  margin-bottom:5px;
}

.order-timeline{
  position:relative;
  padding-left:8px;
}

.timeline-row{
  position:relative;
  display:flex;
  gap:13px;
  padding:6px 0 19px;
}

.timeline-row:not(:last-child):before{
  content:"";
  position:absolute;
  left:6px;
  top:18px;
  bottom:-2px;
  width:2px;
  background:#dbe3ee;
}

.timeline-dot{
  position:relative;
  z-index:2;
  display:block;
  width:14px;
  height:14px;
  margin-top:3px;
  border-radius:50%;
  background:#2563eb;
  box-shadow:0 0 0 4px #dbeafe;
  flex:0 0 auto;
}

.timeline-row strong{
  display:block;
  color:#0f172a;
}

.timeline-row small{
  display:block;
  margin-top:3px;
  color:#64748b;
}

.timeline-completed .timeline-dot{
  background:#16a34a;
  box-shadow:0 0 0 4px #dcfce7;
}


/* Gecikmis kurye daha guclu uyari */
.delivery-countdown.expired{
  background:#dc2626 !important;
  color:#fff !important;
  font-weight:900;
  animation:servelioCourierLate .75s infinite;
}

@keyframes servelioCourierLate{

  0%,100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(220,38,38,.4);
  }

  50%{
    transform:scale(1.04);
    box-shadow:0 0 0 9px rgba(220,38,38,0);
  }
}


@media(max-width:650px){

  .courier-detail-grid{
    grid-template-columns:1fr;
  }

}



/* ===== SERVELIO PERSONNEL UI V1 ===== */

.personnel-form-wrap{
  padding:20px;
  border-bottom:1px solid #e7edf5;
  background:#fbfdff;
}


.personnel-form-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:16px;
}


.personnel-form-grid label{
  display:block;
  font-size:13px;
  font-weight:800;
  margin-bottom:7px;
  color:#0f172a;
}


.personnel-form-grid input,
.personnel-form-grid select{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #dbe2ea;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
}


.personnel-form-actions{
  display:flex;
  gap:10px;
  margin-top:18px;
}


#personnelTable{
  padding:0 20px 20px;
}


.personnel-row{
  display:grid;
  grid-template-columns:
    54px
    minmax(220px,1.6fr)
    1fr
    .7fr
    minmax(230px,1fr);

  gap:16px;

  align-items:center;

  padding:16px 0;

  border-bottom:
    1px solid #eef2f7;
}


.personnel-avatar{
  width:44px;
  height:44px;

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

  border-radius:50%;

  background:#dbeafe;
  color:#1d4ed8;

  font-weight:900;
  font-size:18px;
}


.personnel-person strong{
  display:block;
  margin-bottom:3px;
}


.personnel-role{
  display:inline-block;

  padding:6px 10px;

  border-radius:999px;

  font-size:12px;
  font-weight:800;
}


.role-manager{
  background:#ede9fe;
  color:#6d28d9;
}


.role-kitchen{
  background:#fef3c7;
  color:#92400e;
}


.role-courier{
  background:#e0e7ff;
  color:#3730a3;
}


.role-staff{
  background:#e2e8f0;
  color:#334155;
}


.personnel-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}


@media(max-width:1000px){

  .personnel-form-grid{
    grid-template-columns:
      1fr 1fr;
  }


  .personnel-row{
    grid-template-columns:
      54px 1fr 1fr;
  }


  .personnel-actions{
    grid-column:
      2 / -1;

    justify-content:flex-start;
  }
}


@media(max-width:650px){

  .personnel-form-grid{
    grid-template-columns:1fr;
  }


  .personnel-row{
    grid-template-columns:
      48px 1fr;
  }


  .personnel-row > div:nth-child(3),
  .personnel-row > div:nth-child(4),
  .personnel-actions{
    grid-column:
      2 / -1;
  }
}



/* ===== SERVELIO RBAC UI V1 ===== */

.role-access-note{
  padding:10px 14px;
  margin-bottom:14px;
  border-radius:10px;
  background:#f8fafc;
  color:#64748b;
  font-size:12px;
}


body[data-restaurant-role="kitchen"]
.ready-order-btn{
  display:inline-flex;
}


body[data-restaurant-role="courier"]
.way-order-btn,

body[data-restaurant-role="courier"]
.complete-order-btn{
  display:inline-flex;
}


/* ===== SERVELIO DASHBOARD UI V1 ===== */

#dashboardView{
  background:transparent;
  box-shadow:none;
}

.dashboard-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

.dashboard-top h2{
  margin:0 0 4px;
  font-size:25px;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.dashboard-stat-card{
  position:relative;
  overflow:hidden;
  min-height:118px;
  padding:20px;
  border-radius:18px;
  background:#fff;
  border:1px solid #eef2f7;
  box-shadow:0 8px 26px rgba(15,23,42,.05);
}

.dashboard-stat-card span{
  display:block;
  color:#64748b;
  font-size:13px;
  font-weight:700;
}

.dashboard-stat-card strong{
  display:block;
  margin:9px 0 6px;
  color:#0f172a;
  font-size:29px;
  line-height:1;
}

.dashboard-stat-card small{
  color:#94a3b8;
}

.dashboard-lower-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
  margin-top:18px;
}

.dashboard-panel-card{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(15,23,42,.04);
}

.dashboard-panel-head{
  padding:18px 20px;
  border-bottom:1px solid #eef2f7;
}

.dashboard-panel-head h3{
  margin:0 0 3px;
}

.dashboard-order-row{
  display:grid;
  grid-template-columns:1fr 1.3fr .8fr .7fr;
  gap:14px;
  align-items:center;
  padding:14px 20px;
  border-bottom:1px solid #f1f5f9;
}

.dashboard-order-row small{
  display:block;
  margin-top:3px;
  color:#94a3b8;
}

.dashboard-operation-list{
  padding:10px 20px;
}

.dashboard-operation-list > div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid #eef2f7;
}

.dashboard-operation-list strong{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
}

.dashboard-update-time{
  margin:8px 20px 18px;
  padding:10px 12px;
  border-radius:10px;
  background:#f8fafc;
  color:#64748b;
  font-size:12px;
}

.dashboard-empty{
  padding:22px;
  color:#64748b;
}

@media(max-width:1100px){

  .dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .dashboard-lower-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){

  .dashboard-grid{
    grid-template-columns:1fr;
  }

  .dashboard-order-row{
    grid-template-columns:1fr 1fr;
  }
}



/* ===== SERVELIO DASHBOARD ANALYTICS UI V1 ===== */

.dashboard-analytics{
  margin-top:18px;
}


.analytics-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;

  margin-bottom:14px;
}


.analytics-head h3{
  margin:0 0 4px;
}


.analytics-period{
  display:flex;
  gap:7px;

  padding:5px;

  background:#fff;

  border:
    1px solid #e8edf4;

  border-radius:12px;
}


.analytics-period-btn{
  border:0;
  background:transparent;

  padding:9px 13px;

  border-radius:8px;

  color:#64748b;

  font-weight:800;

  cursor:pointer;
}


.analytics-period-btn.active{
  background:#2563eb;
  color:#fff;
}


.analytics-summary{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;

  margin-bottom:16px;
}


.analytics-summary > div{
  background:#fff;

  border:
    1px solid #eef2f7;

  border-radius:15px;

  padding:17px 19px;

  box-shadow:
    0 6px 22px
    rgba(15,23,42,.035);
}


.analytics-summary span{
  display:block;

  color:#64748b;

  font-size:12px;
  font-weight:700;
}


.analytics-summary strong{
  display:block;

  margin-top:7px;

  font-size:22px;

  color:#0f172a;
}


.analytics-chart-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:16px;
}


.analytics-bottom-grid{
  display:grid;

  grid-template-columns:
    1.3fr 1fr 1fr;

  gap:16px;

  margin-top:16px;
}


.analytics-card{
  background:#fff;

  border:
    1px solid #eef2f7;

  border-radius:18px;

  overflow:hidden;

  box-shadow:
    0 8px 26px
    rgba(15,23,42,.04);
}


.analytics-card-head{
  padding:17px 19px;

  border-bottom:
    1px solid #eef2f7;
}


.analytics-card-head h3{
  margin:0;

  font-size:16px;
}


.servelio-chart{
  min-height:250px;

  padding:12px;

  display:flex;
  align-items:center;
  justify-content:center;
}


.analytics-svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}


.chart-axis{
  stroke:#dbe3ed;
  stroke-width:2;
}


.chart-line{
  fill:none;
  stroke:#2563eb;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.chart-point{
  fill:#2563eb;
  stroke:#fff;
  stroke-width:3;
}


.chart-bar{
  fill:#2563eb;
}


.chart-label{
  fill:#94a3b8;
  font-size:12px;
}


.top-product-row{
  display:flex;

  gap:12px;

  padding:13px 18px;

  border-bottom:
    1px solid #f1f5f9;
}


.top-product-row:last-child{
  border-bottom:0;
}


.top-product-rank{
  width:31px;
  height:31px;

  border-radius:9px;

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

  background:#eff6ff;
  color:#2563eb;

  font-weight:900;

  flex:0 0 auto;
}


.top-product-main{
  flex:1;
  min-width:0;
}


.top-product-title{
  display:flex;

  justify-content:
    space-between;

  gap:10px;
}


.top-product-title strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.top-product-title span,
.top-product-main small{
  color:#64748b;

  font-size:12px;
}


.analytics-progress{
  width:100%;
  height:6px;

  margin:8px 0 5px;

  overflow:hidden;

  border-radius:999px;

  background:#eef2f7;
}


.analytics-progress span{
  display:block;
  height:100%;

  border-radius:inherit;

  background:#2563eb;
}


.analytics-distribution-row{
  padding:14px 18px;

  display:grid;

  grid-template-columns:
    1fr auto;

  gap:8px;

  border-bottom:
    1px solid #f1f5f9;
}


.analytics-distribution-row:last-child{
  border-bottom:0;
}


.analytics-distribution-row small{
  display:block;

  margin-top:3px;

  color:#94a3b8;
}


.distribution-right{
  text-align:right;
}


.analytics-progress.full{
  grid-column:1 / -1;

  margin:3px 0 0;
}


.order-type-box{
  display:flex;

  align-items:center;

  gap:13px;

  padding:16px 18px;

  border-bottom:
    1px solid #f1f5f9;
}


.order-type-box:last-child{
  border-bottom:0;
}


.order-type-percent{
  width:52px;
  height:52px;

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

  border-radius:50%;

  background:#eff6ff;
  color:#1d4ed8;

  font-size:14px;
  font-weight:900;
}


.order-type-box small{
  display:block;

  margin-top:4px;

  color:#94a3b8;
}


.analytics-empty{
  padding:25px;

  color:#94a3b8;

  text-align:center;
}


@media(max-width:1100px){

  .analytics-chart-grid{
    grid-template-columns:1fr;
  }

  .analytics-bottom-grid{
    grid-template-columns:1fr;
  }

}


@media(max-width:700px){

  .analytics-head{
    align-items:flex-start;
    flex-direction:column;
  }


  .analytics-summary{
    grid-template-columns:1fr;
  }


  .analytics-period{
    width:100%;
  }


  .analytics-period-btn{
    flex:1;
  }

}



/* ===== SERVELIO RESTAURANT SETTINGS UI V1 ===== */

#settingsView{
  background:transparent;
  box-shadow:none;
}


.settings-page-head{
  display:flex;

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

  gap:15px;

  margin-bottom:18px;
}


.settings-page-head h2{
  margin:0 0 4px;
}


.restaurant-open-badge{
  padding:9px 13px;

  border-radius:999px;

  font-size:13px;
  font-weight:900;
}


.restaurant-open-badge.open{
  background:#dcfce7;
  color:#166534;
}


.restaurant-open-badge.closed{
  background:#fee2e2;
  color:#991b1b;
}


.settings-card{
  background:#fff;

  border:
    1px solid #eef2f7;

  border-radius:18px;

  margin-bottom:16px;

  box-shadow:
    0 8px 26px
    rgba(15,23,42,.04);

  overflow:hidden;
}


.settings-card-head{
  padding:17px 20px;

  border-bottom:
    1px solid #eef2f7;
}


.settings-card-head h3{
  margin:0;
}


.settings-form-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:16px;

  padding:20px;
}


.settings-form-grid label,
.settings-logo-grid label{
  display:block;

  margin-bottom:7px;

  font-size:13px;
  font-weight:800;

  color:#0f172a;
}


.settings-form-grid input,
.settings-form-grid select,
.settings-logo-grid input{

  width:100%;

  min-height:45px;

  box-sizing:border-box;

  padding:10px 12px;

  border:
    1px solid #dbe3ec;

  border-radius:10px;

  background:#fff;

  color:#0f172a;
}


.settings-form-grid input:focus,
.settings-form-grid select:focus,
.settings-logo-grid input:focus{

  outline:none;

  border-color:#2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37,99,235,.08);
}


.settings-logo-grid{
  display:grid;

  grid-template-columns:
    1fr 170px;

  gap:22px;

  align-items:center;

  padding:20px;
}


.settings-logo-preview{
  height:130px;

  display:flex;

  align-items:center;
  justify-content:center;

  overflow:hidden;

  border:
    1px dashed #cbd5e1;

  border-radius:14px;

  background:#f8fafc;

  color:#94a3b8;
}


.settings-logo-preview img{
  display:none;

  max-width:100%;
  max-height:110px;

  object-fit:contain;
}


.settings-switch-list{
  padding:
    0 20px 20px;
}


.settings-switch-row{
  position:relative;

  display:flex;

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

  gap:20px;

  padding:16px 0;

  border-bottom:
    1px solid #eef2f7;

  cursor:pointer;
}


.settings-switch-row:last-child{
  border-bottom:0;
}


.settings-switch-row strong{
  display:block;
}


.settings-switch-row small{
  display:block;

  margin-top:4px;

  color:#64748b;
}


.settings-switch-row input{
  position:absolute;

  opacity:0;
  pointer-events:none;
}


.toggle-switch{
  position:relative;

  width:48px;
  height:27px;

  flex:0 0 48px;

  border-radius:999px;

  background:#cbd5e1;

  transition:.2s;
}


.toggle-switch:after{
  content:"";

  position:absolute;

  top:3px;
  left:3px;

  width:21px;
  height:21px;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 2px 6px
    rgba(0,0,0,.2);

  transition:.2s;
}


.settings-switch-row
input:checked
+
.toggle-switch{
  background:#16a34a;
}


.settings-switch-row
input:checked
+
.toggle-switch:after{
  transform:
    translateX(21px);
}


#openingHoursGrid{
  padding:0 20px 20px;
}


.opening-row{
  display:grid;

  grid-template-columns:
    1fr
    110px
    130px
    25px
    130px;

  gap:12px;

  align-items:center;

  min-height:62px;

  border-bottom:
    1px solid #eef2f7;
}


.opening-row:last-child{
  border-bottom:0;
}


.opening-row label{
  display:flex;

  align-items:center;

  gap:7px;

  font-size:13px;
}


.opening-row input[type="time"]{
  min-height:39px;

  padding:7px 9px;

  border:
    1px solid #dbe3ec;

  border-radius:9px;

  background:#fff;
}


.opening-row.closed{
  opacity:.55;
}


.settings-message{
  min-height:25px;

  margin:10px 3px;

  font-weight:700;
}


.settings-message.success{
  color:#15803d;
}


.settings-message.error{
  color:#dc2626;
}


.settings-save-bar{
  position:sticky;

  bottom:15px;

  display:flex;

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

  gap:20px;

  margin-top:16px;

  padding:16px 18px;

  border:
    1px solid #dbe3ec;

  border-radius:16px;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 12px 35px
    rgba(15,23,42,.12);

  backdrop-filter:
    blur(8px);

  z-index:20;
}


.settings-save-bar small{
  display:block;

  margin-top:3px;

  color:#64748b;
}


@media(max-width:1000px){

  .settings-form-grid{
    grid-template-columns:
      1fr 1fr;
  }


  .opening-row{
    grid-template-columns:
      1fr 100px 1fr 20px 1fr;
  }

}


@media(max-width:650px){

  .settings-page-head{
    align-items:flex-start;
    flex-direction:column;
  }


  .settings-form-grid{
    grid-template-columns:1fr;
  }


  .settings-logo-grid{
    grid-template-columns:1fr;
  }


  .opening-row{
    grid-template-columns:
      1fr 90px;

    padding:13px 0;
  }


  .opening-row
  input[type="time"]{
    width:100%;
  }


  .opening-row > span{
    display:none;
  }


  .opening-row
  .opening-from,
  .opening-row
  .opening-to{
    grid-column:1 / -1;
  }


  .settings-save-bar{
    bottom:8px;

    align-items:stretch;
    flex-direction:column;
  }


  .settings-save-bar button{
    width:100%;
  }

}



/* ======================================================
   SERVELIO ORDER DETAIL V2
   ====================================================== */

.sv-hidden{
  display:none !important;
}

.sv-order-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.sv-order-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.7);
  backdrop-filter:blur(5px);
}

.sv-order-card{
  position:relative;
  z-index:2;
  width:min(780px,100%);
  max-height:92vh;
  overflow:auto;
  background:#fff;
  border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.3);
}

.sv-order-close{
  position:absolute;
  right:17px;
  top:17px;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  font-size:25px;
  z-index:5;
}

#svOrderDetailBody{
  padding:26px;
}

.sv-order-loading,
.sv-order-error{
  padding:50px 20px;
  text-align:center;
}

.sv-order-error{
  color:#b91c1c;
}

.sv-order-error span{
  display:block;
  margin-top:7px;
}

.sv-detail-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:23px;
}

.sv-detail-kicker{
  display:block;
  margin-bottom:5px;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
}

.sv-detail-header h2{
  margin:0;
  font-size:28px;
}

.sv-detail-date{
  margin-top:5px;
  color:#64748b;
}

.sv-detail-status{
  margin-right:45px;
  padding:9px 12px;
  border-radius:999px;
  background:#fff7ed;
  color:#c2410c;
  font-size:12px;
  font-weight:900;
}

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

.sv-detail-box,
.sv-detail-products,
.sv-timeline{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:17px;
}

.sv-detail-box h3,
.sv-detail-products h3,
.sv-timeline h3{
  margin:0 0 13px;
  font-size:15px;
}

.sv-detail-line{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:9px 0;
  font-size:13px;
}

.sv-detail-line span{
  color:#64748b;
}

.sv-detail-line strong{
  text-align:right;
}

.sv-detail-products{
  margin-top:14px;
}

.sv-detail-product{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid #edf2f7;
}

.sv-detail-product:last-child{
  border-bottom:0;
}

.sv-detail-product small{
  display:block;
  margin-top:3px;
  color:#64748b;
}

.sv-order-note{
  margin-top:14px;
  padding:14px;
  border-radius:12px;
  background:#fff7ed;
  border:1px solid #fed7aa;
}

.sv-order-note p{
  margin:6px 0 0;
}

.sv-detail-totals{
  margin-top:16px;
  margin-left:auto;
  max-width:360px;
}

.sv-detail-totals > div{
  display:flex;
  justify-content:space-between;
  margin:8px 0;
}

.sv-total-final{
  margin-top:12px !important;
  padding-top:13px;
  border-top:2px solid #0f172a;
  font-size:19px;
}

.sv-timeline{
  margin-top:18px;
}

.sv-timeline-item{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:10px;
  position:relative;
  padding:7px 0;
}

.sv-timeline-item > span{
  width:10px;
  height:10px;
  margin-top:5px;
  border-radius:50%;
  background:#16a34a;
}

.sv-timeline-item strong{
  display:block;
}

.sv-timeline-item small{
  display:block;
  margin-top:3px;
  color:#64748b;
}

.sv-status-actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-top:20px;
}

.sv-status-actions button{
  min-height:46px;
  border:0;
  border-radius:11px;
  background:#eef2ff;
  color:#1e40af;
  font-weight:800;
}

.sv-status-actions button:hover{
  background:#dbeafe;
}

.sv-detail-footer{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
}

.sv-print-btn{
  min-height:46px;
  padding:0 19px;
  border:0;
  border-radius:11px;
  background:#0f172a;
  color:#fff;
  font-weight:800;
}

@media(max-width:700px){

  .sv-order-modal{
    padding:8px;
  }

  .sv-order-card{
    max-height:96vh;
    border-radius:17px;
  }

  #svOrderDetailBody{
    padding:19px;
  }

  .sv-detail-grid{
    grid-template-columns:1fr;
  }

  .sv-detail-header h2{
    font-size:22px;
  }

  .sv-detail-status{
    margin-right:40px;
  }

  .sv-status-actions{
    grid-template-columns:1fr 1fr;
  }

}



/* ==========================================================
   SERVELIO_AI_PANEL_STYLE_V1
   ========================================================== */

.ai-view{
  padding:28px;
}

.ai-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.ai-head h1{
  margin:4px 0 6px;
}

.ai-head p{
  margin:0;
  opacity:.7;
}

.ai-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  opacity:.55;
}

.ai-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  margin-left:7px;
  padding:0 6px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:800;
}

.ai-stats{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px;
}

.ai-stat{
  padding:18px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background:#fff;
}

.ai-stat span{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  opacity:.6;
}

.ai-stat strong{
  font-size:22px;
}

.ai-actions-list{
  display:grid;
  gap:14px;
}

.ai-action-card{
  padding:20px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.04);
}

.ai-action-top,
.ai-action-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.ai-action-id{
  margin-right:8px;
  opacity:.5;
  font-size:13px;
}

.ai-status{
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}

.ai-status.pending{
  background:#fff3cd;
  color:#7a5700;
}

.ai-action-customer{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:18px 0;
}

.ai-action-customer span{
  font-size:13px;
  opacity:.6;
}

.ai-action-details{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}

.ai-action-details > div{
  padding:13px;
  border-radius:12px;
  background:rgba(0,0,0,.025);
}

.ai-action-details span{
  display:block;
  margin-bottom:5px;
  font-size:11px;
  opacity:.55;
}

.ai-action-details strong{
  font-size:13px;
}

.ai-action-buttons{
  display:flex;
  gap:8px;
}

.ai-action-buttons button{
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
}

.ai-reject{
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
}

.ai-approve{
  border:0;
  background:#111;
  color:#fff;
}

.ai-action-buttons button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.ai-empty{
  padding:35px;
  border:1px dashed rgba(0,0,0,.15);
  border-radius:16px;
  text-align:center;
  opacity:.7;
}

.ai-error{
  color:#9b1c1c;
}

@media(max-width:760px){

  .ai-view{
    padding:16px;
  }

  .ai-head{
    flex-direction:column;
  }

  .ai-stats,
  .ai-action-details{
    grid-template-columns:1fr;
  }

  .ai-action-footer{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* ==========================================================
   SERVELIO_AI_APPROVAL_PREMIUM_V2
   ========================================================== */

#aiNavBtn{
  position:relative;
}

#aiNavBtn .ai-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  margin-left:auto;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  box-shadow:
    0 0 0 3px rgba(239,68,68,.14),
    0 6px 18px rgba(239,68,68,.22);
}

#aiNavBtn .ai-badge:not(.hidden){
  animation:
    servelioAiBadgePulse
    2.2s
    ease-in-out
    infinite;
}

@keyframes servelioAiBadgePulse{
  0%,
  100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }
}


/* ==========================================================
   AI VIEW
   ========================================================== */

.ai-view{
  width:100%;
  max-width:1380px;
  margin:0 auto;
  padding-bottom:50px;
}

.ai-head{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  overflow:hidden;
  margin-bottom:22px;
  padding:28px 30px;
  border:1px solid #e7edf3;
  border-radius:24px;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(0,168,150,.14),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbfc 55%,
      #f4fbfa 100%
    );
  box-shadow:
    0 18px 50px rgba(15,23,42,.07);
}

.ai-head::after{
  content:"AI";
  position:absolute;
  right:32px;
  bottom:-35px;
  font-size:120px;
  font-weight:900;
  letter-spacing:-8px;
  color:rgba(0,168,150,.045);
  pointer-events:none;
}

.ai-head > *{
  position:relative;
  z-index:1;
}

.ai-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  color:#008f82;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.ai-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#00a896;
  box-shadow:
    0 0 0 5px rgba(0,168,150,.12);
}

.ai-head h1{
  margin:0 0 8px;
  color:#0f172a;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.03em;
}

.ai-head p{
  max-width:620px;
  margin:0;
  color:#64748b;
  font-size:14px;
  line-height:1.65;
}

#aiRefreshBtn{
  min-width:132px;
  border-radius:12px;
}


/* ==========================================================
   STATS
   ========================================================== */

.ai-stats{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:22px;
}

.ai-stat{
  position:relative;
  overflow:hidden;
  padding:20px 22px;
  border:1px solid #e7edf3;
  border-radius:18px;
  background:#fff;
  box-shadow:
    0 9px 28px rgba(15,23,42,.045);
}

.ai-stat::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  border-radius:4px;
  background:#00a896;
}

.ai-stat span{
  display:block;
  margin-bottom:7px;
  color:#64748b;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.ai-stat strong{
  display:block;
  color:#0f172a;
  font-size:24px;
  line-height:1.15;
}


/* ==========================================================
   ACTION LIST / CARDS
   ========================================================== */

.ai-actions-list{
  display:grid;
  gap:16px;
}

.ai-action-card{
  position:relative;
  overflow:hidden;
  padding:22px;
  border:1px solid #e4eaf0;
  border-radius:20px;
  background:#fff;
  box-shadow:
    0 8px 28px rgba(15,23,42,.045);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.ai-action-card:hover{
  transform:translateY(-1px);
  border-color:#d4dee8;
  box-shadow:
    0 14px 35px rgba(15,23,42,.07);
}

.ai-action-card[data-ai-kind="reservation"]{
  border-left:4px solid #00a896;
}

.ai-action-card[data-ai-kind="order"]{
  border-left:4px solid #2563eb;
}

.ai-action-card[aria-busy="true"]{
  opacity:.72;
  pointer-events:none;
}

.ai-action-card[aria-busy="true"]::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      110deg,
      transparent 25%,
      rgba(255,255,255,.65) 45%,
      transparent 65%
    );
  transform:translateX(-100%);
  animation:
    servelioAiProcessing
    1.1s
    linear
    infinite;
}

@keyframes servelioAiProcessing{
  to{
    transform:translateX(100%);
  }
}


/* ==========================================================
   CARD HEADER
   ========================================================== */

.ai-action-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.ai-action-top > div{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.ai-action-top strong{
  color:#0f172a;
  font-size:17px;
  font-weight:800;
}

.ai-action-id{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 9px;
  border-radius:8px;
  background:#f1f5f9;
  color:#64748b;
  font-size:11px;
  font-weight:800;
}


/* ==========================================================
   STATUS
   ========================================================== */

.ai-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:27px;
  padding:5px 10px;
  border-radius:999px;
  background:#f1f5f9;
  color:#475569;
  font-size:10px;
  font-weight:900;
  letter-spacing:.055em;
  white-space:nowrap;
}

.ai-status.pending{
  background:#fff7ed;
  color:#c2410c;
  box-shadow:
    inset 0 0 0 1px #fed7aa;
}

.ai-status.executing{
  background:#eff6ff;
  color:#1d4ed8;
  box-shadow:
    inset 0 0 0 1px #bfdbfe;
}

.ai-status.completed{
  background:#ecfdf5;
  color:#047857;
  box-shadow:
    inset 0 0 0 1px #a7f3d0;
}

.ai-status.rejected{
  background:#fff1f2;
  color:#be123c;
  box-shadow:
    inset 0 0 0 1px #fecdd3;
}

.ai-status.failed{
  background:#fef2f2;
  color:#b91c1c;
  box-shadow:
    inset 0 0 0 1px #fecaca;
}


/* ==========================================================
   CUSTOMER
   ========================================================== */

.ai-action-customer{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-bottom:18px;
  padding:14px 16px;
  border-radius:14px;
  background:#f8fafc;
}

.ai-action-customer strong{
  color:#0f172a;
  font-size:14px;
}

.ai-action-customer span{
  color:#64748b;
  font-size:13px;
}


/* ==========================================================
   DETAILS
   ========================================================== */

.ai-action-details{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:19px;
}

.ai-action-details > div{
  min-width:0;
  padding:14px 15px;
  border:1px solid #edf1f5;
  border-radius:14px;
  background:#fbfcfd;
}

.ai-action-details span{
  display:block;
  margin-bottom:6px;
  color:#94a3b8;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.ai-action-details strong{
  display:block;
  overflow-wrap:anywhere;
  color:#1e293b;
  font-size:13px;
  font-weight:700;
  line-height:1.55;
}


/* ==========================================================
   FOOTER / ACTION BUTTONS
   ========================================================== */

.ai-action-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:16px;
  border-top:1px solid #edf2f7;
}

.ai-action-footer small{
  color:#94a3b8;
  font-size:11px;
}

.ai-action-buttons{
  display:flex;
  align-items:center;
  gap:9px;
}

.ai-action-buttons button{
  min-width:108px;
  height:40px;
  padding:0 16px;
  border-radius:11px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    opacity .15s ease;
}

.ai-action-buttons button:not(:disabled):active{
  transform:translateY(1px);
}

.ai-action-buttons button:disabled{
  cursor:not-allowed;
  opacity:.6;
}

.ai-reject{
  border:1px solid #fecaca;
  background:#fff;
  color:#dc2626;
}

.ai-reject:hover:not(:disabled){
  background:#fef2f2;
  box-shadow:
    0 5px 14px rgba(220,38,38,.08);
}

.ai-approve{
  border:1px solid #00a896;
  background:
    linear-gradient(
      135deg,
      #00a896,
      #008f82
    );
  color:#fff;
  box-shadow:
    0 7px 18px rgba(0,168,150,.18);
}

.ai-approve:hover:not(:disabled){
  box-shadow:
    0 9px 22px rgba(0,168,150,.27);
}


/* ==========================================================
   EMPTY / ERROR
   ========================================================== */

.ai-empty{
  padding:44px 24px;
  border:1px dashed #dbe4ec;
  border-radius:18px;
  background:#fbfcfd;
  color:#64748b;
  text-align:center;
  font-size:14px;
  line-height:1.6;
}

.ai-empty.ai-error{
  border-color:#fecaca;
  background:#fff7f7;
  color:#b91c1c;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:760px){

  .ai-view{
    padding-bottom:30px;
  }

  .ai-head{
    flex-direction:column;
    padding:22px 18px;
    border-radius:18px;
  }

  .ai-head::after{
    right:16px;
    bottom:-20px;
    font-size:84px;
  }

  .ai-head h1{
    font-size:25px;
  }

  #aiRefreshBtn{
    width:100%;
  }

  .ai-stats{
    grid-template-columns:1fr;
    gap:10px;
  }

  .ai-stat{
    padding:17px 18px;
  }

  .ai-action-card{
    padding:17px;
    border-radius:17px;
  }

  .ai-action-top{
    align-items:flex-start;
  }

  .ai-action-details{
    grid-template-columns:1fr;
  }

  .ai-action-footer{
    align-items:stretch;
    flex-direction:column;
  }

  .ai-action-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .ai-action-buttons button{
    width:100%;
    min-width:0;
  }

}


@media (max-width:420px){

  .ai-action-top{
    flex-direction:column;
  }

  .ai-status{
    align-self:flex-start;
  }

  .ai-action-buttons{
    grid-template-columns:1fr;
  }

}




/*
 * ============================================================
 * SERVELIO_READINESS_PANEL_CSS_V1
 * ============================================================
 */

.sv-readiness-shell{
  margin:24px 0 26px;
  padding:24px;
  border:1px solid #e5ebf0;
  border-radius:24px;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f8fbfc 100%
    );
  box-shadow:
    0 18px 50px rgba(7,18,26,.07);
  overflow:hidden;
  position:relative;
}

.sv-readiness-shell::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  right:-100px;
  top:-120px;
  background:
    rgba(0,168,150,.07);
  pointer-events:none;
}

.sv-readiness-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px;
  margin-bottom:20px;
  position:relative;
  z-index:1;
}

.sv-readiness-eyebrow{
  display:block;
  margin-bottom:7px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  color:#00a896;
}

.sv-readiness-head h3{
  margin:0 0 6px;
  font-size:22px;
  line-height:1.2;
  color:#07121a;
}

.sv-readiness-head p{
  margin:0;
  max-width:650px;
  color:#64748b;
  font-size:14px;
  line-height:1.55;
}

.sv-readiness-head-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.sv-readiness-overall{
  min-height:36px;
  padding:0 13px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.sv-readiness-overall.loading{
  background:#eef2f5;
  color:#64748b;
}

.sv-readiness-overall.ready{
  background:#dcfdf7;
  color:#087f71;
}

.sv-readiness-overall.partial{
  background:#e6faf7;
  color:#008f80;
}

.sv-readiness-overall.missing{
  background:#fff1f2;
  color:#be123c;
}

.sv-readiness-refresh{
  min-height:36px;
  padding:0 14px;
  border:1px solid #dce5ea;
  border-radius:10px;
  background:#fff;
  color:#07121a;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:
    .2s ease;
}

.sv-readiness-refresh:hover{
  border-color:#00a896;
  color:#008f80;
  transform:translateY(-1px);
}

.sv-readiness-refresh:disabled{
  opacity:.6;
  cursor:wait;
  transform:none;
}

.sv-readiness-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:14px;
  position:relative;
  z-index:1;
}

.sv-readiness-card{
  min-width:0;
  padding:18px;
  border:1px solid #e5ebf0;
  border-radius:18px;
  background:#fff;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.sv-readiness-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 12px 28px rgba(7,18,26,.07);
}

.sv-readiness-card.ready{
  border-color:
    rgba(0,168,150,.26);
}

.sv-readiness-card.closed{
  border-color:
    rgba(217,119,6,.24);
}

.sv-readiness-card.missing{
  border-color:
    rgba(225,29,72,.18);
}

.sv-readiness-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.sv-readiness-icon{
  width:40px;
  height:40px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#07121a;
  color:#00e6d1;
  font-size:15px;
  font-weight:900;
  letter-spacing:.02em;
}

.sv-readiness-icon.ai{
  font-size:12px;
}

.sv-readiness-badge{
  padding:6px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}

.sv-readiness-badge.loading{
  background:#eef2f5;
  color:#64748b;
}

.sv-readiness-badge.ready{
  background:#dcfdf7;
  color:#087f71;
}

.sv-readiness-badge.closed{
  background:#fff7ed;
  color:#b45309;
}

.sv-readiness-badge.missing{
  background:#fff1f2;
  color:#be123c;
}

.sv-readiness-label{
  display:block;
  margin-bottom:5px;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.sv-readiness-card > strong{
  display:block;
  margin-bottom:8px;
  color:#07121a;
  font-size:17px;
  line-height:1.25;
}

.sv-readiness-card p{
  min-height:43px;
  margin:0 0 15px;
  color:#64748b;
  font-size:12px;
  line-height:1.5;
}

.sv-readiness-card small{
  display:block;
  padding-top:12px;
  border-top:1px solid #eef2f5;
  color:#475569;
  font-size:11px;
  line-height:1.4;
}

.sv-readiness-foot{
  margin-top:17px;
  padding-top:16px;
  border-top:1px solid #e9eef2;
  display:flex;
  align-items:center;
  gap:8px;
  color:#64748b;
  font-size:11px;
  position:relative;
  z-index:1;
}

.sv-readiness-live-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#00a896;
  box-shadow:
    0 0 0 5px rgba(0,168,150,.09);
}

.sv-readiness-time{
  margin-left:auto;
  white-space:nowrap;
  color:#94a3b8;
}

@media(max-width:1150px){

  .sv-readiness-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

@media(max-width:720px){

  .sv-readiness-shell{
    margin:18px 0 22px;
    padding:18px;
    border-radius:20px;
  }

  .sv-readiness-head{
    flex-direction:column;
    align-items:stretch;
  }

  .sv-readiness-head-right{
    justify-content:space-between;
  }

  .sv-readiness-grid{
    grid-template-columns:1fr;
    gap:11px;
  }

  .sv-readiness-card{
    padding:16px;
  }

  .sv-readiness-card p{
    min-height:0;
  }

  .sv-readiness-foot{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .sv-readiness-time{
    width:100%;
    margin-left:16px;
  }

}






/* SERVELIO_RESTAURANT_MOBILE_PREMIUM_V2_CSS_START */


/* ============================================================
   DESKTOP SAFETY
   ============================================================ */

.sv-mobile-topbar,
.sv-mobile-overlay,
.sv-mobile-bottom-nav,
.sv-mobile-drawer-head{
  display:none;
}


/* ============================================================
   TABLET / MOBILE SHELL
   ============================================================ */

@media(max-width:900px){

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }


  body{
    background:#f5f8fa;
  }


  body.sv-mobile-menu-open{
    overflow:hidden;
    touch-action:none;
  }


  #appView.app{
    display:block !important;
    width:100%;
    min-height:100vh;
  }


  #appView .main{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    margin:0 !important;

    padding:
      82px
      16px
      100px !important;
  }


  /* ==========================================================
     MOBILE TOPBAR
     ========================================================== */

  .sv-mobile-topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;

    z-index:12000;

    height:66px;

    display:grid;

    grid-template-columns:
      44px
      minmax(0,1fr)
      44px;

    align-items:center;

    gap:10px;

    padding:
      0
      14px;

    background:
      rgba(7,18,26,.96);

    -webkit-backdrop-filter:
      blur(18px);

    backdrop-filter:
      blur(18px);

    border-bottom:
      1px solid
      rgba(255,255,255,.07);

    box-shadow:
      0 8px 28px
      rgba(7,18,26,.17);
  }


  .sv-mobile-menu-btn{
    width:42px;
    height:42px;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:5px;

    padding:0;

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

    border-radius:13px;

    background:
      rgba(255,255,255,.05);

    cursor:pointer;
  }


  .sv-mobile-menu-btn span{
    width:19px;
    height:2px;

    display:block;

    border-radius:99px;

    background:#fff;
  }


  .sv-mobile-brand{
    min-width:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
  }


  .sv-mobile-brand strong{
    color:#fff;

    font-size:17px;
    font-weight:900;

    line-height:1.1;

    letter-spacing:-.02em;
  }


  .sv-mobile-brand span{
    margin-top:3px;

    overflow:hidden;

    color:#94a3b8;

    font-size:10px;
    font-weight:700;

    line-height:1.1;

    text-overflow:ellipsis;
    white-space:nowrap;
  }


  .sv-mobile-status{
    width:42px;
    height:42px;

    display:flex;

    align-items:center;
    justify-content:center;

    justify-self:end;

    border:
      1px solid
      rgba(0,230,209,.16);

    border-radius:13px;

    background:
      rgba(0,230,209,.07);
  }


  .sv-mobile-status i{
    width:9px;
    height:9px;

    display:block;

    border-radius:50%;

    background:#00e6d1;

    box-shadow:
      0 0 0 5px
      rgba(0,230,209,.09);
  }


  /* ==========================================================
     MOBILE SIDEBAR DRAWER
     ========================================================== */

  #appView .sidebar{
    position:fixed !important;

    top:0 !important;
    left:0 !important;
    bottom:0 !important;

    z-index:14000 !important;

    width:
      min(
        84vw,
        318px
      ) !important;

    height:100dvh !important;
    min-height:100dvh !important;

    padding:
      20px
      16px
      22px !important;

    display:flex !important;

    flex-direction:column !important;

    overflow-y:auto !important;
    overscroll-behavior:contain;

    background:
      linear-gradient(
        180deg,
        #07121a 0%,
        #091722 100%
      ) !important;

    box-shadow:
      25px 0 60px
      rgba(2,8,13,.35);

    transform:
      translateX(-105%);

    transition:
      transform
      .28s
      cubic-bezier(.2,.8,.2,1);
  }


  #appView .sidebar.sv-mobile-open{
    transform:
      translateX(0);
  }


  #appView .sidebar > .side-brand{
    display:none !important;
  }


  .sv-mobile-drawer-head{
    display:flex;

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

    gap:14px;

    padding:
      4px
      2px
      18px;

    margin-bottom:8px;

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


  .sv-mobile-drawer-head > div{
    display:flex;
    flex-direction:column;
  }


  .sv-mobile-drawer-head span{
    color:#00e6d1;

    font-size:9px;
    font-weight:900;

    letter-spacing:.13em;
  }


  .sv-mobile-drawer-head strong{
    margin-top:4px;

    color:#fff;

    font-size:22px;
    font-weight:900;
  }


  .sv-mobile-close-btn{
    width:38px;
    height:38px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:0;

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

    border-radius:12px;

    background:
      rgba(255,255,255,.06);

    color:#fff;

    font-size:27px;
    font-weight:300;

    line-height:1;

    cursor:pointer;
  }


  #appView .sidebar nav{
    display:flex !important;

    flex-direction:column !important;

    gap:5px !important;

    width:100% !important;
  }


  #appView .sidebar .nav{
    width:100% !important;

    min-height:48px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:flex-start !important;

    padding:
      0
      14px !important;

    border:
      1px solid
      transparent !important;

    border-radius:13px !important;

    color:#cbd5e1 !important;

    background:
      transparent !important;

    font-size:14px !important;
    font-weight:750 !important;

    text-align:left !important;
  }


  #appView .sidebar .nav.active{
    color:#fff !important;

    background:
      rgba(0,230,209,.10) !important;

    border-color:
      rgba(0,230,209,.13) !important;
  }


  #appView .sidebar .logout{
    width:100% !important;

    margin-top:auto !important;

    min-height:45px !important;

    border-radius:13px !important;
  }


  /* ==========================================================
     OVERLAY
     ========================================================== */

  .sv-mobile-overlay{
    position:fixed;

    inset:0;

    z-index:13000;

    display:block;

    visibility:hidden;

    padding:0;

    border:0;

    opacity:0;

    background:
      rgba(1,7,12,.50);

    -webkit-backdrop-filter:
      blur(3px);

    backdrop-filter:
      blur(3px);

    transition:
      opacity .25s ease,
      visibility .25s ease;

    pointer-events:none;
  }


  .sv-mobile-overlay.sv-mobile-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }


  /* ==========================================================
     BOTTOM NAV
     ========================================================== */

  .sv-mobile-bottom-nav{
    position:fixed;

    left:
      max(
        10px,
        env(safe-area-inset-left)
      );

    right:
      max(
        10px,
        env(safe-area-inset-right)
      );

    bottom:
      max(
        10px,
        env(safe-area-inset-bottom)
      );

    z-index:11000;

    min-height:67px;

    display:grid;

    grid-template-columns:
      repeat(
        5,
        minmax(0,1fr)
      );

    align-items:center;

    padding:
      7px
      5px;

    border:
      1px solid
      rgba(7,18,26,.08);

    border-radius:20px;

    background:
      rgba(255,255,255,.96);

    -webkit-backdrop-filter:
      blur(18px);

    backdrop-filter:
      blur(18px);

    box-shadow:
      0 14px 45px
      rgba(7,18,26,.16);
  }


  .sv-mobile-tab{
    min-width:0;
    min-height:53px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:4px;

    padding:
      4px
      2px;

    border:0;

    border-radius:14px;

    background:
      transparent;

    color:#718096;

    font-size:9px;
    font-weight:800;

    cursor:pointer;
  }


  .sv-mobile-tab.active{
    color:#008f80;

    background:
      rgba(0,168,150,.08);
  }


  .sv-mobile-tab-icon{
    display:block;

    min-height:21px;

    font-size:21px;

    line-height:21px;

    font-weight:700;
  }


  .sv-mobile-tab.ai{
    position:relative;
  }


  .sv-mobile-ai-circle{
    width:31px;
    height:31px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-top:-14px;

    border:
      3px solid #fff;

    border-radius:12px;

    background:
      linear-gradient(
        135deg,
        #07121a,
        #0d2430
      );

    color:#00e6d1;

    box-shadow:
      0 8px 17px
      rgba(7,18,26,.20);

    font-size:10px;
    font-weight:900;
  }


  /* ==========================================================
     GLOBAL PANEL SPACING
     ========================================================== */

  #appView .panel{
    min-width:0 !important;

    padding:
      18px !important;

    border-radius:
      20px !important;
  }


  #appView .dashboard-top{
    align-items:flex-start !important;

    gap:12px !important;
  }


  #appView .dashboard-top h2{
    font-size:
      clamp(
        23px,
        6vw,
        30px
      ) !important;
  }


  #dashboardRefreshBtn{
    min-height:40px !important;

    padding:
      0
      14px !important;

    border-radius:
      12px !important;

    flex-shrink:0;
  }


  /* ==========================================================
     DASHBOARD STAT GRID
     ========================================================== */

  #appView .dashboard-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:
      10px !important;
  }


  #appView .dashboard-stat-card{
    min-width:0 !important;
    min-height:118px !important;

    padding:
      15px !important;

    border-radius:
      16px !important;
  }


  #appView .dashboard-stat-card span{
    font-size:
      11px !important;
  }


  #appView .dashboard-stat-card strong{
    font-size:
      22px !important;
  }


  #appView .dashboard-stat-card small{
    font-size:
      10px !important;

    line-height:
      1.35 !important;
  }


  #appView .dashboard-lower-grid{
    grid-template-columns:
      1fr !important;

    gap:
      12px !important;
  }


  /* ==========================================================
     READINESS
     ========================================================== */

  #appView .sv-readiness-shell{
    margin:
      18px
      0
      20px !important;

    padding:
      17px !important;

    border-radius:
      20px !important;
  }


  #appView .sv-readiness-head{
    gap:
      14px !important;
  }


  #appView .sv-readiness-head h3{
    font-size:
      20px !important;
  }


  #appView .sv-readiness-head-right{
    width:
      100%;

    justify-content:
      space-between;
  }


  #appView .sv-readiness-grid{
    grid-template-columns:
      1fr !important;

    gap:
      10px !important;
  }


  #appView .sv-readiness-card{
    padding:
      15px !important;

    border-radius:
      16px !important;
  }


  #appView .sv-readiness-card-top{
    margin-bottom:
      12px !important;
  }


  #appView .sv-readiness-card p{
    min-height:
      0 !important;

    margin-bottom:
      12px !important;
  }


  #appView .sv-readiness-foot{
    flex-wrap:
      wrap !important;

    gap:
      8px !important;
  }


  #appView .sv-readiness-time{
    width:
      100% !important;

    margin-left:
      16px !important;
  }


  /* ==========================================================
     ANALYTICS
     ========================================================== */

  #appView .dashboard-analytics{
    min-width:0 !important;
  }


  #appView .analytics-head{
    align-items:flex-start !important;

    flex-direction:
      column !important;

    gap:
      14px !important;
  }


  #appView .analytics-period{
    width:
      100% !important;

    display:grid !important;

    grid-template-columns:
      repeat(
        3,
        1fr
      ) !important;
  }


  #appView .analytics-period-btn{
    min-width:
      0 !important;

    padding:
      10px
      5px !important;
  }


  #appView .analytics-summary{
    grid-template-columns:
      1fr !important;

    gap:
      10px !important;
  }


  #appView .analytics-chart-grid,
  #appView .analytics-bottom-grid{
    grid-template-columns:
      1fr !important;

    gap:
      12px !important;
  }


  #appView .analytics-card{
    min-width:
      0 !important;

    overflow:
      hidden !important;

    border-radius:
      18px !important;
  }


  #appView .servelio-chart{
    overflow-x:auto !important;

    -webkit-overflow-scrolling:
      touch;
  }


  #appView .servelio-chart svg{
    min-width:
      620px;
  }


  /* ==========================================================
     TABLES / LISTS
     ========================================================== */

  #appView .orders-table,
  #appView .categories-table,
  #appView .personnel-table{
    width:
      100% !important;

    max-width:
      100% !important;

    overflow-x:
      auto !important;

    -webkit-overflow-scrolling:
      touch;

    border-radius:
      16px !important;
  }


  #appView table{
    min-width:
      680px;
  }


  #appView .dashboard-order-row{
    grid-template-columns:
      minmax(115px,1fr)
      minmax(115px,1fr)
      auto
      auto !important;

    min-width:
      560px;
  }


  #dashboardRecentOrders{
    overflow-x:auto;

    -webkit-overflow-scrolling:
      touch;
  }


  /* ==========================================================
     FORMS
     ========================================================== */

  #appView input,
  #appView select,
  #appView textarea{
    max-width:
      100% !important;

    min-height:
      44px;

    font-size:
      16px !important;
  }


  #appView textarea{
    min-height:
      100px;
  }


  #appView .category-form,
  #appView .product-form,
  #appView .settings-form{
    grid-template-columns:
      1fr !important;
  }


  #appView .category-actions{
    flex-wrap:
      wrap;
  }


  /* ==========================================================
     MODALS
     ========================================================== */

  #appView .modal,
  #appView .sv-modal{
    align-items:
      flex-end !important;

    padding:
      10px !important;
  }


  #appView .modal-card,
  #appView .sv-modal-card,
  #appView .order-modal-card{
    width:
      100% !important;

    max-width:
      100% !important;

    max-height:
      calc(
        100dvh - 90px
      ) !important;

    margin:
      0 !important;

    overflow-y:
      auto !important;

    border-radius:
      22px
      22px
      14px
      14px !important;
  }


  /* ==========================================================
     FLOATING AI
     ========================================================== */

  #appView .servelio-ai-widget,
  #appView .ai-floating-button{
    bottom:
      92px !important;

    right:
      14px !important;
  }


}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media(max-width:520px){

  #appView .main{
    padding:
      78px
      10px
      96px !important;
  }


  #appView .panel{
    padding:
      14px !important;

    border-radius:
      17px !important;
  }


  #appView .dashboard-top{
    flex-direction:
      column !important;

    align-items:
      stretch !important;
  }


  #dashboardRefreshBtn{
    width:
      100% !important;
  }


  #appView .dashboard-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:
      8px !important;
  }


  #appView .dashboard-stat-card{
    min-height:
      111px !important;

    padding:
      13px !important;
  }


  #appView .dashboard-stat-card strong{
    font-size:
      20px !important;
  }


  #appView .sv-readiness-shell{
    padding:
      14px !important;
  }


  #appView .sv-readiness-head-right{
    display:grid !important;

    grid-template-columns:
      1fr
      auto !important;
  }


  #appView .sv-readiness-overall{
    min-width:
      0 !important;
  }


  .sv-mobile-bottom-nav{
    left:
      6px;

    right:
      6px;

    bottom:
      max(
        6px,
        env(safe-area-inset-bottom)
      );

    border-radius:
      18px;
  }


  .sv-mobile-tab{
    font-size:
      8px;
  }


}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media(max-width:380px){

  #appView .dashboard-grid{
    grid-template-columns:
      1fr !important;
  }


  .sv-mobile-brand strong{
    font-size:
      16px;
  }


  #appView .main{
    padding-left:
      8px !important;

    padding-right:
      8px !important;
  }


}


/* SERVELIO_RESTAURANT_MOBILE_PREMIUM_V2_CSS_END */





/* SERVELIO_MOBILE_V2_VISUAL_FINAL_START */


/*
 * Old duplicated dashboard remains in DOM only because
 * legacy JS still writes restaurant/admin values into it.
 * It is no longer rendered.
 */

.sv-legacy-dashboard-topbar,
.sv-legacy-dashboard-stats,
.sv-legacy-dashboard-welcome{
  display:none !important;
}


@media(max-width:900px){

  /*
   * Ensure bottom navigation is genuinely clickable.
   */
  #servelioMobileBottomNav{
    pointer-events:auto !important;
    z-index:11000 !important;
  }


  #servelioMobileBottomNav .sv-mobile-tab{
    pointer-events:auto !important;
    position:relative;
    z-index:1;
    touch-action:manipulation;
    -webkit-tap-highlight-color:
      transparent;
  }


  /*
   * Page content must not sit under bottom navigation.
   */
  #appView .main{
    padding-bottom:
      calc(
        126px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  /*
   * Old AI floating shortcut sits ABOVE bottom navigation.
   */
  #servelio-ai-float{
    right:
      max(
        14px,
        env(safe-area-inset-right)
      ) !important;

    bottom:
      calc(
        94px +
        env(safe-area-inset-bottom)
      ) !important;

    width:52px !important;
    height:52px !important;
    min-width:52px !important;

    padding:0 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

    z-index:10950 !important;

    pointer-events:auto !important;

    box-shadow:
      0 12px 28px
      rgba(7,18,26,.24) !important;
  }


  #servelio-ai-float strong{
    display:none !important;
  }


  #servelio-ai-float span{
    width:29px !important;
    height:29px !important;

    flex:
      0
      0
      29px !important;

    margin:0 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;
  }


  #appView,
  #appView .main,
  #dashboardView{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

}


@media(max-width:430px){

  #appView .main{
    padding-bottom:
      calc(
        122px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  #servelio-ai-float{
    right:
      max(
        12px,
        env(safe-area-inset-right)
      ) !important;

    bottom:
      calc(
        91px +
        env(safe-area-inset-bottom)
      ) !important;
  }

}


/* SERVELIO_MOBILE_V2_VISUAL_FINAL_END */





/* SERVELIO_MOBILE_DASHBOARD_COMPACT_V1_START */


/*
 * Dashboard recent orders are a SUMMARY.
 * Full order history remains in Bestellungen / Siparişler.
 */

#dashboardRecentOrders{
  width:100%;
  max-width:100%;
}


@media(max-width:900px){

  /*
   * No 560px desktop-style rows on mobile.
   */
  #dashboardRecentOrders{
    overflow:visible !important;
  }


  #dashboardRecentOrders .dashboard-order-row{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    gap:
      8px
      12px !important;

    align-items:center !important;

    padding:
      14px
      2px !important;

    overflow:hidden !important;
  }


  #dashboardRecentOrders
  .dashboard-order-row
  > div:nth-child(1){
    grid-column:1;
    grid-row:1;
    min-width:0;
  }


  #dashboardRecentOrders
  .dashboard-order-row
  > strong:last-child{
    grid-column:2;
    grid-row:1;

    justify-self:end;

    white-space:nowrap;
  }


  #dashboardRecentOrders
  .dashboard-order-row
  > div:nth-child(2){
    grid-column:1;
    grid-row:2;

    min-width:0;
  }


  #dashboardRecentOrders
  .dashboard-order-row
  > div:nth-child(3){
    grid-column:2;
    grid-row:2;

    justify-self:end;
  }


  #dashboardRecentOrders
  .dashboard-order-row
  strong,
  #dashboardRecentOrders
  .dashboard-order-row
  small{
    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;
  }


  #dashboardRecentOrders
  .dashboard-order-row
  > div:nth-child(1)
  strong,
  #dashboardRecentOrders
  .dashboard-order-row
  > div:nth-child(2)
  strong{
    display:block;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
  }


  /*
   * Strong visual safeguard:
   * even if an older cached JS renders more rows,
   * mobile never shows an endless train.
   */
  #dashboardRecentOrders
  .dashboard-order-row:nth-child(n+5){
    display:none !important;
  }


  /*
   * Fixed mobile header should never cover a newly opened view.
   */
  #appView .main > section{
    scroll-margin-top:82px;
  }


  /*
   * Long labels/buttons may wrap instead of disappearing.
   */
  #appView button,
  #appView .badge,
  #appView .order-status,
  #appView .status-btn,
  #appView .edit-btn,
  #appView .delete-btn{
    max-width:100%;
  }


  #appView button{
    white-space:normal;
  }

}


@media(min-width:901px){

  /*
   * Safety if API later returns more than six recent records.
   */
  #dashboardRecentOrders
  .dashboard-order-row:nth-child(n+7){
    display:none !important;
  }

}


/* SERVELIO_MOBILE_DASHBOARD_COMPACT_V1_END */





/* SERVELIO_BRANDING_LANGUAGE_PREMIUM_V1_CSS_START */


/* ============================================================
   SHARED PREMIUM SETTINGS
   ============================================================ */

.sv-premium-language-card,
.sv-premium-logo-card{
  padding:0 !important;
  overflow:hidden;
  border:
    1px solid
    #e3e9ee !important;
  border-radius:
    24px !important;
  background:
    #fff !important;
  box-shadow:
    0 16px 38px
    rgba(7,18,26,.055);
}


.sv-settings-icon{
  width:54px;
  height:54px;
  flex:0 0 54px;

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

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      #07121a,
      #102530
    );

  color:#00e6d1;

  font-size:10px;
  font-weight:950;
  letter-spacing:.05em;

  box-shadow:
    0 10px 22px
    rgba(7,18,26,.13);
}


.sv-settings-eyebrow{
  display:block;

  margin-bottom:5px;

  color:#009e8f;

  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}


.sv-store-language-header,
.sv-logo-premium-head{
  display:flex;

  align-items:flex-start;

  gap:16px;

  padding:
    22px
    22px
    17px;
}


.sv-store-language-header h3,
.sv-logo-premium-head h3{
  margin:
    0
    0
    5px;

  color:#101827;

  font-size:20px;
  line-height:1.2;
}


.sv-store-language-header p,
.sv-logo-premium-head p{
  max-width:700px;

  margin:0;

  color:#66758d;

  font-size:13px;
  line-height:1.55;
}


/* ============================================================
   STOREFRONT LANGUAGE
   ============================================================ */

.sv-native-storefront-locale{
  position:absolute !important;

  width:1px !important;
  height:1px !important;

  padding:0 !important;
  margin:-1px !important;

  overflow:hidden !important;

  clip:
    rect(
      0,
      0,
      0,
      0
    ) !important;

  white-space:nowrap !important;

  border:0 !important;
}


.sv-language-options{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:10px;

  padding:
    2px
    22px
    20px;
}


.sv-language-choice{
  position:relative;

  min-height:70px;

  display:flex;
  flex-direction:column;

  align-items:flex-start;
  justify-content:center;

  gap:4px;

  padding:
    13px
    42px
    13px
    15px;

  border:
    1px solid
    #dfe6ec;

  border-radius:
    15px;

  background:
    #f9fbfc;

  color:#162033;

  cursor:pointer;

  text-align:left;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


.sv-language-choice:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(0,168,150,.38);

  background:#fff;

  box-shadow:
    0 8px 20px
    rgba(7,18,26,.06);
}


.sv-language-choice.active{
  border-color:
    rgba(0,168,150,.50);

  background:
    linear-gradient(
      145deg,
      #effcf9,
      #f8fffd
    );

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(0,168,150,.08);
}


.sv-language-choice-main{
  font-size:14px;
  font-weight:900;
}


.sv-language-choice-sub{
  color:#8390a2;

  font-size:10px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;
}


.sv-language-choice-check{
  position:absolute;

  top:50%;
  right:14px;

  width:24px;
  height:24px;

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

  border-radius:50%;

  transform:
    translateY(-50%);

  background:#e9eef2;
  color:#a0abba;

  font-size:11px;
  font-weight:950;
}


.sv-language-choice.active
.sv-language-choice-check{
  background:#00a896;
  color:#fff;
}


.sv-language-foot{
  display:flex;
  align-items:center;

  gap:8px;

  padding:
    13px
    22px;

  border-top:
    1px solid
    #edf1f4;

  background:
    #fbfcfd;

  color:#7a8798;

  font-size:11px;
}


.sv-language-live-dot{
  width:7px;
  height:7px;

  flex:0 0 7px;

  border-radius:50%;

  background:#00a896;

  box-shadow:
    0
    0
    0
    4px
    rgba(0,168,150,.09);
}


/* ============================================================
   LOGO UPLOAD
   ============================================================ */

.sv-logo-dropzone{
  margin:
    0
    22px
    22px;

  min-height:205px;

  display:grid;

  grid-template-columns:
    minmax(180px,240px)
    1fr;

  gap:22px;

  align-items:center;

  padding:18px;

  border:
    1.5px dashed
    #ccd7df;

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      #fbfdfe,
      #f7fafb
    );

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.sv-logo-dropzone.dragging{
  border-color:#00a896;

  background:#f0fcf9;

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(0,168,150,.08);
}


.sv-logo-dropzone.uploading{
  opacity:.72;
}


.sv-logo-preview-box{
  height:165px;

  display:flex;

  align-items:center;
  justify-content:center;

  overflow:hidden;

  border:
    1px solid
    #e3e9ee;

  border-radius:17px;

  background:#fff;
}


#svPremiumLogoPreview{
  width:100%;
  height:100%;

  display:none;

  object-fit:contain;

  padding:16px;
}


.sv-logo-empty{
  width:100%;
  height:100%;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:11px;

  padding:18px;

  color:#8995a6;

  text-align:center;
}


.sv-logo-placeholder-mark{
  width:52px;
  height:52px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      #07121a,
      #102530
    );

  color:#00e6d1;

  font-size:23px;
  font-weight:950;
}


.sv-logo-empty strong{
  font-size:12px;
}


.sv-logo-upload-content{
  min-width:0;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:9px;
}


.sv-logo-upload-content > strong{
  color:#1c2738;

  font-size:14px;
  line-height:1.45;
}


.sv-logo-upload-content > span{
  color:#8290a2;

  font-size:11px;
}


.sv-logo-actions{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:9px;

  margin-top:9px;
}


.sv-logo-primary,
.sv-logo-remove{
  min-height:42px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:
    0
    17px;

  border-radius:12px;

  font-size:12px;
  font-weight:900;

  cursor:pointer;

  transition:.2s ease;
}


.sv-logo-primary{
  border:1px solid #07121a;

  background:#07121a;

  color:#fff;
}


.sv-logo-primary:hover{
  transform:
    translateY(-1px);

  background:#102530;
}


.sv-logo-remove{
  border:
    1px solid
    #e4e9ee;

  background:#fff;

  color:#b42318;
}


.sv-logo-primary:disabled,
.sv-logo-remove:disabled{
  opacity:.55;
  cursor:wait;
  transform:none;
}


.sv-logo-status{
  min-height:18px;

  margin-top:3px;

  color:#65758a;

  font-size:11px;
  font-weight:700;
}


.sv-logo-status.success{
  color:#078777;
}


.sv-logo-status.error{
  color:#c23b32;
}


.sv-logo-file-input{
  display:none !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:720px){

  .sv-store-language-header,
  .sv-logo-premium-head{
    padding:
      18px
      17px
      15px;

    gap:13px;
  }


  .sv-settings-icon{
    width:46px;
    height:46px;

    flex-basis:46px;

    border-radius:14px;
  }


  .sv-store-language-header h3,
  .sv-logo-premium-head h3{
    font-size:18px;
  }


  .sv-store-language-header p,
  .sv-logo-premium-head p{
    font-size:12px;
  }


  .sv-language-options{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:8px;

    padding:
      2px
      17px
      16px;
  }


  .sv-language-choice{
    min-height:64px;

    padding:
      11px
      38px
      11px
      13px;
  }


  .sv-language-foot{
    padding:
      12px
      17px;
  }


  .sv-logo-dropzone{
    grid-template-columns:
      1fr;

    gap:16px;

    margin:
      0
      17px
      17px;

    padding:14px;

    min-height:0;
  }


  .sv-logo-preview-box{
    height:170px;
  }


  .sv-logo-upload-content{
    align-items:stretch;
  }


  .sv-logo-upload-content > strong,
  .sv-logo-upload-content > span,
  .sv-logo-status{
    text-align:center;
  }


  .sv-logo-actions{
    display:grid;

    grid-template-columns:
      1fr
      1fr;

    width:100%;
  }


  .sv-logo-primary,
  .sv-logo-remove{
    width:100%;
  }

}


@media(max-width:390px){

  .sv-language-options{
    grid-template-columns:1fr;
  }

}


/* SERVELIO_BRANDING_LANGUAGE_PREMIUM_V1_CSS_END */


/* =========================================================
   SERVELIO LIVE BESTELLUNGEN PREMIUM V1 FINAL
   ========================================================= */

#ordersView.sv-live-orders-v1{
  padding:0 !important;
  background:#f5f7fb;
  min-height:calc(100vh - 80px);
}

#ordersView.sv-live-orders-v1 > *{
  display:none !important;
}

#ordersView.sv-live-orders-v1 #svLiveOrdersApp{
  display:block !important;
}

#svLiveOrdersApp{
  --sv-bg:#f5f7fb;
  --sv-card:#ffffff;
  --sv-text:#172033;
  --sv-muted:#778196;
  --sv-line:#e5e9f1;
  --sv-brand:#06a89d;
  --sv-brand-dark:#087e78;
  --sv-green:#20b26b;
  --sv-red:#ed4b55;
  --sv-orange:#f5a623;
  --sv-blue:#3b82f6;
  padding:24px;
  color:var(--sv-text);
  background:var(--sv-bg);
  min-height:calc(100vh - 80px);
}

.sv-live-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}

.sv-live-title-wrap{
  display:flex;
  align-items:center;
  gap:14px;
}

.sv-live-pulse{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#20b26b;
  box-shadow:0 0 0 7px rgba(32,178,107,.13);
  animation:svPulse 1.8s infinite;
}

@keyframes svPulse{
  0%,100%{box-shadow:0 0 0 5px rgba(32,178,107,.12)}
  50%{box-shadow:0 0 0 11px rgba(32,178,107,0)}
}

.sv-live-head h1{
  margin:0;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.7px;
}

.sv-live-sub{
  margin-top:5px;
  color:var(--sv-muted);
  font-size:14px;
}

.sv-live-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.sv-live-status{
  display:flex;
  align-items:center;
  gap:8px;
  background:#eafaf2;
  color:#15804e;
  border:1px solid #c9efdc;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  white-space:nowrap;
}

.sv-live-refresh{
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid var(--sv-line);
  background:white;
  font-weight:800;
  cursor:pointer;
}

.sv-live-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(120px,1fr));
  gap:12px;
  margin-bottom:18px;
}

.sv-summary-card{
  background:white;
  border:1px solid var(--sv-line);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 5px 20px rgba(25,39,70,.04);
}

.sv-summary-label{
  color:var(--sv-muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.sv-summary-value{
  margin-top:5px;
  font-size:25px;
  font-weight:900;
}

.sv-live-board{
  display:grid;
  grid-template-columns:repeat(5,minmax(260px,1fr));
  gap:14px;
  overflow-x:auto;
  padding-bottom:12px;
  align-items:start;
}

.sv-live-column{
  min-width:260px;
  background:#eef1f6;
  border:1px solid #e2e6ed;
  border-radius:18px;
  padding:11px;
  min-height:530px;
}

.sv-column-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 5px 13px;
  font-weight:900;
  font-size:15px;
}

.sv-column-title{
  display:flex;
  align-items:center;
  gap:8px;
}

.sv-column-dot{
  width:9px;
  height:9px;
  border-radius:50%;
}

.sv-col-new .sv-column-dot{background:var(--sv-red)}
.sv-col-preparing .sv-column-dot{background:var(--sv-orange)}
.sv-col-ready .sv-column-dot{background:var(--sv-green)}
.sv-col-way .sv-column-dot{background:var(--sv-blue)}
.sv-col-completed .sv-column-dot{background:#7c879d}

.sv-column-count{
  min-width:26px;
  height:26px;
  padding:0 8px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:white;
  border:1px solid var(--sv-line);
  font-size:12px;
}

.sv-order-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sv-order-card{
  background:white;
  border:1px solid #e2e7ef;
  border-radius:15px;
  padding:14px;
  box-shadow:0 6px 18px rgba(28,42,68,.06);
  transition:.18s ease;
  position:relative;
  overflow:hidden;
}

.sv-order-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(28,42,68,.10);
}

.sv-order-card.sv-waiting{
  border:2px solid #ef5963;
  box-shadow:0 0 0 4px rgba(237,75,85,.08);
}

.sv-order-card.sv-waiting:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:#ed4b55;
}

.sv-order-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.sv-order-number{
  font-size:17px;
  font-weight:950;
}

.sv-order-age{
  border-radius:999px;
  padding:5px 8px;
  background:#f0f3f7;
  color:#667085;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.sv-waiting .sv-order-age{
  background:#fff0f1;
  color:#d93442;
}

.sv-order-customer{
  margin-top:8px;
  font-size:14px;
  font-weight:850;
}

.sv-order-type{
  display:inline-flex;
  margin-top:7px;
  padding:5px 8px;
  border-radius:8px;
  background:#edf8f7;
  color:#087e78;
  font-size:11px;
  font-weight:900;
}

.sv-order-note{
  margin-top:10px;
  padding:9px 10px;
  border-radius:10px;
  background:#fff8e8;
  border:1px solid #f8e4af;
  font-size:12px;
  line-height:1.4;
}

.sv-order-meta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:end;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid #edf0f4;
}

.sv-order-payment{
  color:var(--sv-muted);
  font-size:11px;
}

.sv-order-total{
  font-size:16px;
  font-weight:950;
}

.sv-prep-title{
  margin-top:12px;
  margin-bottom:6px;
  font-size:11px;
  color:var(--sv-muted);
  font-weight:900;
}

.sv-prep-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.sv-prep-btn{
  min-height:38px;
  border-radius:9px;
  border:1px solid #dce2ea;
  background:white;
  cursor:pointer;
  font-weight:900;
  color:#475467;
}

.sv-prep-btn.active{
  background:#e8faf8;
  border-color:#5fd1c8;
  color:#087e78;
}

.sv-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:8px;
}

.sv-action{
  border:0;
  border-radius:10px;
  min-height:43px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}

.sv-action:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.sv-action-accept{
  background:#12a87d;
  color:white;
}

.sv-action-reject{
  background:#fff0f1;
  color:#d93644;
  border:1px solid #f4c9ce;
}

.sv-action-ready{
  grid-column:1/-1;
  background:#1fad68;
  color:white;
}

.sv-action-way{
  grid-column:1/-1;
  background:#3b82f6;
  color:white;
}

.sv-action-complete{
  grid-column:1/-1;
  background:#172033;
  color:white;
}

.sv-action-detail{
  grid-column:1/-1;
  background:#f2f4f7;
  color:#344054;
}

.sv-countdown{
  margin-top:9px;
  font-size:12px;
  font-weight:900;
  color:#c77b00;
}

.sv-live-empty{
  min-height:130px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#98a2b3;
  font-size:13px;
  padding:18px;
}

.sv-quickbar{
  position:sticky;
  bottom:12px;
  z-index:25;
  margin:18px auto 0;
  width:min(980px,calc(100% - 20px));
  background:#111827;
  border-radius:17px;
  padding:9px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  box-shadow:0 15px 45px rgba(17,24,39,.28);
}

.sv-quickbar button{
  min-height:48px;
  border:0;
  border-radius:11px;
  background:#202938;
  color:white;
  cursor:pointer;
  font-size:11px;
  font-weight:850;
  padding:7px;
}

.sv-quickbar button:hover{
  background:#2d3748;
}

.sv-quickbar button.sv-danger{
  background:#7f1d1d;
}

@media(max-width:1200px){
  #svLiveOrdersApp{padding:16px}
  .sv-live-board{
    grid-template-columns:repeat(5,280px);
  }
}

@media(max-width:760px){
  #svLiveOrdersApp{
    padding:12px 10px 90px;
  }

  .sv-live-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .sv-live-head h1{
    font-size:24px;
  }

  .sv-live-head-actions{
    width:100%;
  }

  .sv-live-status,
  .sv-live-refresh{
    flex:1;
    justify-content:center;
  }

  .sv-live-summary{
    display:flex;
    overflow-x:auto;
    gap:8px;
  }

  .sv-summary-card{
    min-width:125px;
  }

  .sv-live-board{
    grid-template-columns:repeat(5,86vw);
    scroll-snap-type:x mandatory;
  }

  .sv-live-column{
    min-width:86vw;
    scroll-snap-align:start;
    min-height:420px;
  }

  .sv-quickbar{
    position:fixed;
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    grid-template-columns:repeat(5,1fr);
    border-radius:15px;
    margin:0;
  }

  .sv-quickbar button{
    font-size:9px;
    min-height:50px;
    padding:4px;
  }
}

/* SERVELIO LIVE BESTELLUNGEN PREMIUM V1 FINAL END */



/* =========================================================
   SERVELIO LIVE ORDERS PAGINATION V2
   ========================================================= */

.sv-live-column{
  /*
   * Prevent one column from creating the
   * "infinite railway" effect.
   */
  min-height:0 !important;
  align-self:start;
}

.sv-order-stack{
  min-height:120px;
}

.sv-column-pager{
  position:sticky;
  bottom:0;
  margin-top:11px;
  padding:8px;

  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:7px;

  border-radius:12px;

  background:
    rgba(255,255,255,.96);

  border:
    1px solid #dde3ec;

  box-shadow:
    0 5px 16px
    rgba(25,39,70,.08);

  backdrop-filter:
    blur(8px);

  z-index:5;
}

.sv-page-btn{
  width:42px;
  height:40px;

  display:grid;
  place-items:center;

  border:1px solid #d8dee8;
  border-radius:10px;

  background:#f7f9fc;
  color:#172033;

  font-size:25px;
  line-height:1;

  font-weight:900;

  cursor:pointer;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.sv-page-btn:hover:not(:disabled){
  transform:translateY(-1px);
  background:#e8faf8;
  border-color:#65d3ca;
  color:#087e78;
}

.sv-page-btn:active:not(:disabled){
  transform:scale(.96);
}

.sv-page-btn:disabled{
  opacity:.28;
  cursor:not-allowed;
}

.sv-page-info{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  min-width:0;

  color:#667085;
  font-size:11px;
  font-weight:800;
}

.sv-page-info strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:46px;
  min-height:28px;

  padding:0 8px;

  border-radius:999px;

  background:#edf8f7;
  color:#087e78;

  font-size:12px;
  font-weight:950;
}

.sv-page-info span{
  white-space:nowrap;
}

/*
 * Desktop:
 * 8 cards maximum means every column has
 * a predictable visual length.
 */
@media(min-width:1201px){

  .sv-live-column{
    max-height:none;
  }

}

/*
 * Tablet:
 * Larger touch targets.
 */
@media(
  min-width:761px
) and (
  max-width:1200px
){

  .sv-column-pager{
    grid-template-columns:48px 1fr 48px;
  }

  .sv-page-btn{
    width:48px;
    height:46px;
  }

}

/*
 * Mobile:
 * Pager stays compact.
 */
@media(max-width:760px){

  .sv-column-pager{
    grid-template-columns:46px 1fr 46px;
    padding:7px;
  }

  .sv-page-btn{
    width:46px;
    height:44px;
  }

  .sv-page-info{
    font-size:10px;
  }

}

/* SERVELIO LIVE ORDERS PAGINATION V2 END */



/* =========================================================
   SERVELIO LIVE ORDERS — FIT SCREEN V3
   Desktop: all 5 workflow columns fit inside available area.
   Browser zoom target: 100%.
   ========================================================= */

/*
 * Critical:
 * The orders application itself may NEVER be wider
 * than the content area next to the sidebar.
 */
#ordersView.sv-live-orders-v1{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
}

#ordersView.sv-live-orders-v1 #svLiveOrdersApp{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/*
 * Everything inside the app must participate correctly
 * in CSS grid shrinking.
 */
#svLiveOrdersApp,
#svLiveOrdersApp *{
  box-sizing:border-box;
}


/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */

@media (min-width:1201px){

  /*
   * Slightly reduce the outside padding.
   * This gives the Kanban more useful width.
   */
  #svLiveOrdersApp{
    padding:
      20px 14px 24px !important;

    overflow-x:hidden !important;
  }

  /*
   * Summary and board use EXACTLY the same
   * five-column geometry.
   */
  .sv-live-summary{
    width:100% !important;
    max-width:100% !important;

    display:grid !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    gap:10px !important;

    overflow:visible !important;
  }

  .sv-live-board{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:grid !important;

    /*
     * This is the important fix.
     * Previous 260px minimum width forced:
     *
     * 260 × 5 + gaps
     *
     * and pushed "Tamamlandı" outside the viewport.
     *
     * minmax(0,1fr) lets all five columns share
     * the REAL available content width.
     */
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    gap:10px !important;

    overflow-x:hidden !important;
    overflow-y:visible !important;

    padding-bottom:12px !important;
  }

  .sv-live-column{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    padding:9px !important;

    border-radius:16px !important;

    overflow:hidden !important;
  }

  .sv-summary-card{
    width:auto !important;
    min-width:0 !important;

    padding:13px 14px !important;
  }

  /*
   * Cards may shrink, but their text must not
   * force the grid column wider.
   */
  .sv-order-card{
    width:100% !important;
    min-width:0 !important;

    padding:12px !important;
  }

  .sv-order-top{
    min-width:0 !important;
  }

  .sv-order-number{
    min-width:0 !important;

    font-size:15px !important;
    line-height:1.28 !important;

    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  .sv-order-customer{
    min-width:0 !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .sv-order-meta{
    min-width:0 !important;
  }

  .sv-order-payment{
    min-width:0 !important;
  }

  .sv-order-total{
    font-size:15px !important;
    white-space:nowrap !important;
  }

  /*
   * Prep buttons remain large enough for touch,
   * but no longer force the first column wider.
   */
  .sv-prep-grid{
    width:100% !important;

    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    gap:5px !important;
  }

  .sv-prep-btn{
    min-width:0 !important;
    padding:6px 3px !important;

    font-size:12px !important;
  }

  .sv-card-actions{
    width:100% !important;
    min-width:0 !important;

    gap:6px !important;
  }

  .sv-action{
    min-width:0 !important;

    padding:8px 5px !important;

    font-size:11px !important;

    white-space:normal !important;
  }

  /*
   * Column header must also shrink.
   */
  .sv-column-head{
    min-width:0 !important;
  }

  .sv-column-title{
    min-width:0 !important;

    font-size:14px !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .sv-column-count{
    flex:0 0 auto !important;
  }

  /*
   * Pagination stays inside each column.
   */
  .sv-column-pager{
    width:100% !important;
    min-width:0 !important;

    grid-template-columns:
      36px minmax(0,1fr) 36px !important;

    gap:4px !important;
    padding:6px !important;
  }

  .sv-page-btn{
    width:36px !important;
    height:38px !important;
  }

  .sv-page-info{
    min-width:0 !important;
    gap:4px !important;
  }

  .sv-page-info span{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /*
   * Quick action bar must never exceed content width.
   */
  .sv-quickbar{
    width:min(
      980px,
      calc(100% - 20px)
    ) !important;

    max-width:calc(100% - 20px) !important;

    grid-template-columns:
      repeat(5,minmax(0,1fr)) !important;
  }

}


/* =========================================================
   SMALL LAPTOP / LARGE TABLET
   Here horizontal Kanban becomes intentional.
   ========================================================= */

@media (min-width:761px) and (max-width:1200px){

  #ordersView.sv-live-orders-v1{
    overflow-x:hidden !important;
  }

  #svLiveOrdersApp{
    padding:
      16px 12px 90px !important;
  }

  .sv-live-summary{
    display:flex !important;
    overflow-x:auto !important;

    scrollbar-width:thin;
  }

  .sv-summary-card{
    flex:0 0 145px !important;
  }

  .sv-live-board{
    display:grid !important;

    grid-template-columns:
      repeat(5, minmax(270px, 78vw)) !important;

    gap:10px !important;

    overflow-x:auto !important;
    overflow-y:visible !important;

    scroll-snap-type:x mandatory;

    padding-bottom:14px !important;
  }

  .sv-live-column{
    min-width:0 !important;
    width:auto !important;

    scroll-snap-align:center;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px){

  #ordersView.sv-live-orders-v1{
    overflow-x:hidden !important;
  }

  .sv-live-board{
    width:100% !important;

    grid-template-columns:
      repeat(5, 86vw) !important;

    overflow-x:auto !important;
    overflow-y:visible !important;
  }

  .sv-live-column{
    width:auto !important;
    min-width:0 !important;
  }

}


/* =========================================================
   GLOBAL HORIZONTAL OVERFLOW PROTECTION
   Only for Live Orders section.
   ========================================================= */

#ordersView.sv-live-orders-v1 img,
#ordersView.sv-live-orders-v1 button,
#ordersView.sv-live-orders-v1 div,
#ordersView.sv-live-orders-v1 section,
#ordersView.sv-live-orders-v1 article{
  max-width:100%;
}

/* SERVELIO LIVE ORDERS — FIT SCREEN V3 END */



/* =========================================================
   SERVELIO LIVE ORDERS — COMPACT CARDS V4
   ========================================================= */

@media (min-width:761px){

  .sv-order-card{
    padding:11px !important;
    border-radius:14px !important;
  }

  /*
   * Short operational order number.
   * Full reference remains available via title/Detail.
   */
  .sv-order-number{
    display:block !important;

    max-width:calc(100% - 58px) !important;

    font-size:17px !important;
    line-height:1.1 !important;
    font-weight:950 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;

    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .sv-order-age{
    padding:4px 7px !important;
    font-size:10px !important;
  }

  .sv-order-customer{
    margin-top:7px !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }

  .sv-order-type{
    margin-top:6px !important;
    padding:4px 7px !important;
    font-size:10px !important;
  }

  .sv-order-note{
    margin-top:8px !important;
    padding:7px 8px !important;
    font-size:11px !important;
  }

  .sv-order-meta{
    margin-top:8px !important;
    padding-top:8px !important;
  }

  .sv-order-payment{
    font-size:10px !important;
    line-height:1.15 !important;
  }

  .sv-order-total{
    font-size:15px !important;
  }

  .sv-prep-title{
    margin-top:9px !important;
    margin-bottom:5px !important;
    font-size:10px !important;
  }

  .sv-prep-btn{
    min-height:36px !important;
  }

  .sv-card-actions{
    margin-top:7px !important;
  }

  .sv-action{
    min-height:40px !important;
  }

  .sv-countdown{
    margin-top:7px !important;
    font-size:11px !important;
  }

}


/*
 * Desktop polish:
 * keep cards compact without making touch actions tiny.
 */
@media (min-width:1201px){

  .sv-order-number{
    font-size:16px !important;
  }

  .sv-action{
    min-height:39px !important;
  }

}


/*
 * Mobile remains touch friendly.
 */
@media (max-width:760px){

  .sv-order-number{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;

    word-break:normal !important;
    overflow-wrap:normal !important;
  }

}

/* SERVELIO LIVE ORDERS — COMPACT CARDS V4 END */



/* =========================================================
   SERVELIO PREMIUM COURIER MODAL V5
   ========================================================= */

body.sv-modal-open{
  overflow:hidden !important;
}

.sv-courier-modal{
  position:fixed;
  inset:0;

  z-index:999999;

  display:grid;
  place-items:center;

  padding:22px;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .16s ease,
    visibility .16s ease;
}

.sv-courier-modal[hidden]{
  display:none !important;
}

.sv-courier-modal.is-open{
  opacity:1;
  visibility:visible;
}

.sv-courier-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(10,18,32,.66);

  backdrop-filter:
    blur(7px);
  -webkit-backdrop-filter:
    blur(7px);
}

.sv-courier-dialog{
  position:relative;

  width:min(
    520px,
    calc(100vw - 32px)
  );

  padding:
    30px 30px 26px;

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

  border-radius:24px;

  background:#fff;

  box-shadow:
    0 28px 80px
    rgba(7,18,38,.28);

  transform:
    translateY(12px)
    scale(.985);

  transition:
    transform .18s ease;

  overflow:hidden;
}

.sv-courier-modal.is-open
.sv-courier-dialog{
  transform:
    translateY(0)
    scale(1);
}

.sv-courier-dialog::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:5px;

  background:
    linear-gradient(
      90deg,
      #0eae83,
      #25c7a3
    );
}

.sv-courier-close{
  position:absolute;

  top:16px;
  right:17px;

  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  padding:0;

  border:0;
  border-radius:12px;

  background:#f1f4f8;
  color:#344054;

  font-size:25px;
  line-height:1;

  cursor:pointer;
}

.sv-courier-close:hover{
  background:#e8edf3;
}

.sv-courier-icon{
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  margin-bottom:17px;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      #e9fbf6,
      #d7f7ef
    );

  font-size:27px;
}

.sv-courier-eyebrow{
  margin-bottom:5px;

  color:#0b9d78;

  font-size:11px;
  font-weight:950;

  letter-spacing:.12em;
}

.sv-courier-title{
  margin:0;

  color:#111c30;

  font-size:25px;
  line-height:1.15;

  font-weight:950;
}

.sv-courier-description{
  max-width:430px;

  margin:
    9px 0 22px;

  color:#667085;

  font-size:14px;
  line-height:1.5;
}

.sv-courier-label{
  display:block;

  margin-bottom:7px;

  color:#344054;

  font-size:12px;
  font-weight:850;
}

.sv-courier-input-wrap{
  position:relative;
}

.sv-courier-phone-icon{
  position:absolute;

  left:15px;
  top:50%;

  transform:
    translateY(-50%);

  color:#667085;

  pointer-events:none;
}

.sv-courier-input{
  width:100%;
  height:54px;

  padding:
    0 15px 0 43px;

  border:
    1.5px solid #d8dee8;

  border-radius:14px;

  outline:none;

  background:#fff;
  color:#101828;

  font-size:16px;
  font-weight:750;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.sv-courier-input:focus{
  border-color:#15b88d;

  box-shadow:
    0 0 0 4px
    rgba(21,184,141,.12);
}

.sv-courier-error{
  margin-top:7px;

  color:#d92d20;

  font-size:12px;
  font-weight:750;
}

.sv-courier-actions{
  display:grid;

  grid-template-columns:
    minmax(0,.75fr)
    minmax(0,1.25fr);

  gap:10px;

  margin-top:23px;
}

.sv-courier-btn{
  min-height:50px;

  padding:10px 16px;

  border:0;
  border-radius:14px;

  font-size:13px;
  font-weight:900;

  cursor:pointer;

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

.sv-courier-btn:active{
  transform:scale(.98);
}

.sv-courier-btn-cancel{
  background:#f0f3f7;
  color:#344054;
}

.sv-courier-btn-cancel:hover{
  background:#e8edf3;
}

.sv-courier-btn-start{
  display:flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  background:
    linear-gradient(
      135deg,
      #0ca77f,
      #17ba91
    );

  color:#fff;

  box-shadow:
    0 8px 20px
    rgba(12,167,127,.22);
}

.sv-courier-btn-start:hover{
  box-shadow:
    0 10px 25px
    rgba(12,167,127,.30);
}


/* Tablet / touch */

@media(max-width:900px){

  .sv-courier-dialog{
    width:min(
      560px,
      calc(100vw - 28px)
    );

    padding:
      28px 24px 24px;
  }

  .sv-courier-input{
    height:58px;
  }

  .sv-courier-btn{
    min-height:56px;
  }

}


/* Mobile bottom-sheet */

@media(max-width:600px){

  .sv-courier-modal{
    place-items:end center;

    padding:0;
  }

  .sv-courier-dialog{
    width:100%;

    padding:
      27px 19px
      calc(
        20px +
        env(safe-area-inset-bottom)
      );

    border-radius:
      24px 24px 0 0;

    transform:
      translateY(35px);
  }

  .sv-courier-modal.is-open
  .sv-courier-dialog{
    transform:
      translateY(0);
  }

  .sv-courier-actions{
    grid-template-columns:1fr;
  }

  .sv-courier-btn-start{
    grid-row:1;
  }

  .sv-courier-btn-cancel{
    grid-row:2;
  }

}

/* SERVELIO PREMIUM COURIER MODAL V5 END */


/* ==========================================================
   SERVELIO PREMIUM ORDER DETAIL V1
   DESKTOP + TABLET + MOBILE
   ========================================================== */

.servelio-order-detail-premium{
  --sod-border:#e7ebf0;
  --sod-soft:#f6f8fa;
  --sod-text:#17202a;
  --sod-muted:#77818d;
  --sod-green:#15965f;
  --sod-green-soft:#eaf8f1;
  --sod-red:#d94a4a;
  --sod-orange:#dc8a1c;

  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:6px 0 40px;
  box-sizing:border-box;
  color:var(--sod-text);
}

.servelio-order-detail-premium *,
.servelio-order-detail-premium *::before,
.servelio-order-detail-premium *::after{
  box-sizing:border-box;
}

.sod-toolbar{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px;
}

.sod-back{
  appearance:none;
  border:1px solid var(--sod-border);
  background:#fff;
  color:#29333d;
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font:inherit;
  font-weight:750;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(20,30,40,.035);
}

.sod-back:hover{
  background:#f8fafb;
  border-color:#d8dee5;
}

.sod-back span{
  font-size:20px;
  line-height:1;
}

.sod-toolbar-status{
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--sod-border);
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.sod-status-dot{
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  background:#8d98a4;
}

.sod-status-new{
  background:#e34d4d;
  box-shadow:0 0 0 4px rgba(227,77,77,.11);
}

.sod-status-preparing{
  background:#e79523;
  box-shadow:0 0 0 4px rgba(231,149,35,.12);
}

.sod-status-ready{
  background:#16a56b;
  box-shadow:0 0 0 4px rgba(22,165,107,.12);
}

.sod-status-on_the_way{
  background:#3484e3;
  box-shadow:0 0 0 4px rgba(52,132,227,.12);
}

.sod-status-completed{
  background:#65717e;
}

.sod-status-cancelled{
  background:#c44747;
}


.sod-hero{
  min-width:0;
  min-height:128px;
  padding:24px 26px;
  border:1px solid var(--sod-border);
  border-radius:20px;
  background:
    radial-gradient(
      circle at 92% 0,
      rgba(21,150,95,.09),
      transparent 34%
    ),
    #fff;
  box-shadow:
    0 12px 35px rgba(20,30,40,.055);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  overflow:hidden;
}

.sod-hero-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:17px;
}

.sod-order-icon{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:17px;
  background:#17212b;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:900;
  box-shadow:0 10px 25px rgba(23,33,43,.16);
}

.sod-eyebrow{
  display:block;
  margin-bottom:4px;
  color:var(--sod-muted);
  font-size:11px;
  line-height:1.3;
  font-weight:850;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.sod-hero h2{
  margin:0;
  max-width:100%;
  color:#17202a;
  font-size:clamp(28px,3vw,42px);
  line-height:1;
  letter-spacing:-.035em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sod-created{
  margin-top:8px;
  color:var(--sod-muted);
  font-size:13px;
  font-weight:600;
}

.sod-hero-total{
  min-width:180px;
  text-align:right;
}

.sod-hero-total span{
  display:block;
  margin-bottom:4px;
  color:var(--sod-muted);
  font-size:12px;
  font-weight:750;
}

.sod-hero-total strong{
  color:#111a22;
  font-size:clamp(26px,3vw,38px);
  line-height:1;
  letter-spacing:-.035em;
  white-space:nowrap;
}


.sod-customer-note{
  margin-top:16px;
  padding:16px 18px;
  border:1px solid #f0d59c;
  border-radius:15px;
  background:#fff9eb;
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.sod-note-icon{
  width:31px;
  height:31px;
  flex:0 0 31px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#f1a92e;
  color:#fff;
  font-weight:950;
}

.sod-customer-note span{
  display:block;
  margin-bottom:3px;
  color:#9b6b17;
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.sod-customer-note strong{
  display:block;
  color:#503b17;
  font-size:14px;
  line-height:1.45;
  overflow-wrap:anywhere;
}


.sod-layout{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);
  gap:18px;
  align-items:start;
  margin-top:18px;
}

.sod-main-column,
.sod-side-column{
  min-width:0;
  display:grid;
  gap:18px;
}

.sod-card{
  min-width:0;
  border:1px solid var(--sod-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 28px rgba(20,30,40,.045);
  overflow:hidden;
}

.sod-card-heading{
  min-width:0;
  min-height:78px;
  padding:17px 20px;
  border-bottom:1px solid var(--sod-border);
  display:flex;
  align-items:center;
  gap:12px;
}

.sod-card-heading > div:nth-child(2){
  min-width:0;
}

.sod-card-heading h3{
  margin:0;
  max-width:100%;
  color:#17202a;
  font-size:17px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sod-card-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#eff7f3;
  color:#16895a;
  font-size:16px;
  font-weight:900;
}

.sod-total-card .sod-card-icon{
  font-size:10px;
}

.sod-count{
  margin-left:auto;
  min-width:32px;
  height:32px;
  padding:0 9px;
  border-radius:999px;
  background:#17212b;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:850;
}


.sod-products{
  min-width:0;
}

.sod-product{
  min-width:0;
  padding:17px 20px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  border-bottom:1px solid #edf0f3;
}

.sod-product:last-child{
  border-bottom:0;
}

.sod-product-qty{
  width:42px;
  height:42px;
  border-radius:12px;
  background:#f2f4f6;
  color:#34404b;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:900;
}

.sod-product-main{
  min-width:0;
}

.sod-product-name{
  display:block;
  color:#1d2730;
  font-size:15px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.sod-item-meta{
  margin-top:6px;
}

.sod-mini-pill{
  display:inline-flex;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  background:#f1f4f6;
  color:#66717c;
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  overflow-wrap:anywhere;
}

.sod-item-note{
  margin-top:7px;
  padding:7px 9px;
  border-left:3px solid #e4a638;
  border-radius:5px;
  background:#fff9ed;
  color:#705321;
  font-size:12px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.sod-product-money{
  min-width:120px;
  text-align:right;
}

.sod-product-money span{
  display:block;
  color:#89929b;
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
}

.sod-product-money small{
  font-size:9px;
}

.sod-product-money strong{
  display:block;
  margin-top:4px;
  color:#17202a;
  font-size:15px;
  white-space:nowrap;
}

.sod-empty{
  padding:28px 20px;
  text-align:center;
  color:var(--sod-muted);
  font-size:13px;
}


.sod-info-list{
  padding:6px 20px 12px;
}

.sod-info-row{
  min-width:0;
  padding:13px 0;
  border-bottom:1px solid #edf0f3;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.sod-info-row:last-child{
  border-bottom:0;
}

.sod-info-row span{
  flex:0 0 auto;
  color:#7b8691;
  font-size:12px;
  font-weight:650;
}

.sod-info-row strong{
  min-width:0;
  color:#25303a;
  font-size:12px;
  font-weight:800;
  text-align:right;
  overflow-wrap:anywhere;
}

.sod-info-row a{
  color:inherit;
  text-decoration:none;
}

.sod-info-row a:hover{
  text-decoration:underline;
}


.sod-totals{
  padding:8px 20px 18px;
}

.sod-totals > div{
  min-width:0;
  padding:11px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#65707a;
  font-size:12px;
}

.sod-totals strong{
  color:#27323c;
  white-space:nowrap;
}

.sod-discount strong{
  color:#15965f;
}

.sod-totals .sod-grand-total{
  margin-top:5px;
  padding-top:17px;
  border-top:1px solid #dfe4e8;
  color:#17202a;
  font-size:14px;
  font-weight:850;
}

.sod-grand-total strong{
  color:#111a22;
  font-size:22px;
  letter-spacing:-.025em;
}


.sod-address{
  padding:18px 20px 21px;
}

.sod-address strong,
.sod-address span{
  display:block;
  overflow-wrap:anywhere;
}

.sod-address strong{
  color:#25303a;
  font-size:14px;
  line-height:1.45;
}

.sod-address span{
  margin-top:4px;
  color:#7c8792;
  font-size:12px;
}


/* -------------------------
   TABLET
   761px — 1200px
   ------------------------- */

@media (min-width:761px) and (max-width:1200px){

  .servelio-order-detail-premium{
    width:100%;
    max-width:100%;
    padding-bottom:32px;
  }

  .sod-hero{
    min-height:112px;
    padding:20px;
  }

  .sod-layout{
    grid-template-columns:minmax(0,1.35fr) minmax(270px,.8fr);
    gap:14px;
  }

  .sod-main-column,
  .sod-side-column{
    gap:14px;
  }

  .sod-card-heading{
    padding:15px 16px;
  }

  .sod-product{
    padding:15px 16px;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:10px;
  }

  .sod-product-qty{
    width:38px;
    height:38px;
  }

  .sod-info-list,
  .sod-totals{
    padding-left:16px;
    padding-right:16px;
  }

  .sod-back{
    min-height:48px;
  }
}


/* -------------------------
   MOBILE
   <= 760px
   ------------------------- */

@media (max-width:760px){

  .servelio-order-detail-premium{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:0 0 96px;
    overflow-x:hidden;
  }

  .sod-toolbar{
    width:100%;
    min-width:0;
    margin-bottom:12px;
    gap:8px;
  }

  .sod-back{
    min-width:0;
    min-height:46px;
    padding:0 12px;
    border-radius:12px;
    font-size:12px;
  }

  .sod-toolbar-status{
    min-width:0;
    max-width:48%;
    min-height:40px;
    padding:0 10px;
    font-size:11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .sod-hero{
    width:100%;
    min-width:0;
    min-height:0;
    padding:17px;
    border-radius:16px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }

  .sod-hero-left{
    min-width:0;
    gap:12px;
  }

  .sod-order-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
    border-radius:14px;
    font-size:21px;
  }

  .sod-hero h2{
    min-width:0;
    font-size:29px;
  }

  .sod-created{
    font-size:11px;
  }

  .sod-hero-total{
    width:100%;
    min-width:0;
    padding-top:14px;
    border-top:1px solid #e8ecef;
    text-align:left;
  }

  .sod-hero-total strong{
    font-size:29px;
  }

  .sod-customer-note{
    margin-top:12px;
    padding:13px;
    border-radius:14px;
  }

  .sod-layout{
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
  }

  .sod-main-column,
  .sod-side-column{
    width:100%;
    min-width:0;
    gap:12px;
  }

  .sod-card{
    width:100%;
    min-width:0;
    max-width:100%;
    border-radius:15px;
  }

  .sod-card-heading{
    min-width:0;
    min-height:68px;
    padding:13px 14px;
    gap:10px;
  }

  .sod-card-icon{
    width:36px;
    height:36px;
    flex-basis:36px;
    border-radius:11px;
  }

  .sod-card-heading h3{
    font-size:15px;
  }

  .sod-product{
    width:100%;
    min-width:0;
    padding:14px;
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
  }

  .sod-product-qty{
    width:36px;
    height:36px;
    font-size:12px;
  }

  .sod-product-money{
    grid-column:2;
    width:100%;
    min-width:0;
    margin-top:4px;
    padding-top:8px;
    border-top:1px dashed #e3e7ea;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    text-align:left;
  }

  .sod-product-money span,
  .sod-product-money strong{
    margin:0;
    white-space:nowrap;
  }

  .sod-product-money strong{
    font-size:14px;
  }

  .sod-info-list,
  .sod-totals{
    padding-left:14px;
    padding-right:14px;
  }

  .sod-info-row{
    gap:12px;
  }

  .sod-info-row strong{
    max-width:62%;
  }

  .sod-address{
    padding:15px 14px 18px;
  }

  .sod-grand-total strong{
    font-size:20px;
  }
}


/* -------------------------
   VERY SMALL MOBILE
   ------------------------- */

@media (max-width:420px){

  .sod-toolbar{
    align-items:stretch;
  }

  .sod-back{
    flex:1 1 auto;
  }

  .sod-toolbar-status{
    flex:0 1 auto;
    max-width:45%;
  }

  .sod-hero{
    padding:15px;
  }

  .sod-hero h2{
    font-size:26px;
  }

  .sod-product-name{
    font-size:14px;
  }

  .sod-info-row{
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
  }

  .sod-info-row strong{
    max-width:100%;
    text-align:left;
  }
}

/* SERVELIO PREMIUM ORDER DETAIL V1 END */

/* =========================================================
   SERVELIO ADMIN SHELL PREMIUM V1
   ========================================================= */

:root{
  --sv-shell-bg:#f4f6f9;
  --sv-shell-sidebar:#101a2a;
  --sv-shell-sidebar-2:#142033;
  --sv-shell-text:#15202b;
  --sv-shell-muted:#778390;
  --sv-shell-border:#e3e8ed;
  --sv-shell-green:#16a36a;
  --sv-shell-green-soft:#e9f8f1;
  --sv-shell-orange:#ef9a22;
  --sv-shell-red:#d84b4b;
  --sv-shell-shadow:0 12px 35px rgba(16,26,42,.07);
}

html,
body{
  max-width:100%;
}

body.sv-premium-admin-ready{
  background:var(--sv-shell-bg);
}

body.sv-premium-admin-ready .sidebar{
  width:240px;
  padding:22px 18px 18px;
  background:
    radial-gradient(
      circle at 20% 0,
      rgba(54,93,137,.16),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #101a2a 0%,
      #0e1726 100%
    );
  border-right:1px solid rgba(255,255,255,.045);
  box-shadow:8px 0 30px rgba(16,26,42,.04);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
}

body.sv-premium-admin-ready .main{
  margin-left:240px;
  width:calc(100% - 240px);
  min-width:0;
  padding:
    0
    clamp(18px,2.2vw,34px)
    44px;
  background:var(--sv-shell-bg);
}


/* BRAND */

body.sv-premium-admin-ready .sidebar .side-brand{
  height:auto;
  margin:0 0 20px;
  padding:0 8px 18px;
  display:flex;
  align-items:center;
  gap:11px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;
}

.sv-brand-mark{
  width:39px;
  height:39px;
  flex:0 0 39px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(
      145deg,
      #20bd82,
      #108b62
    );
  color:#fff;
  font-size:21px;
  font-weight:950;
  box-shadow:
    0 8px 22px rgba(20,174,116,.22);
}

.sv-brand-copy{
  min-width:0;
}

.sv-brand-copy strong{
  display:block;
  color:#fff;
  font-size:19px;
  line-height:1.1;
  letter-spacing:-.025em;
}

.sv-brand-copy small{
  display:block;
  margin-top:4px;
  color:#7f8da1;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}


/* RESTAURANT CARD */

.sv-sidebar-restaurant{
  min-width:0;
  margin:0 0 16px;
  padding:11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  display:flex;
  align-items:center;
  gap:10px;
}

.sv-restaurant-avatar{
  width:37px;
  height:37px;
  flex:0 0 37px;
  border-radius:11px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#fff;
  color:#172333;
  font-size:15px;
  font-weight:950;
}

.sv-restaurant-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.sv-restaurant-copy{
  min-width:0;
}

.sv-restaurant-copy strong{
  display:block;
  max-width:140px;
  color:#f7f9fc;
  font-size:11px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sv-restaurant-copy > span{
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:5px;
  color:#7f8ca0;
  font-size:9px;
  font-weight:750;
}

.sv-restaurant-copy i{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#20c982;
  box-shadow:
    0 0 0 3px rgba(32,201,130,.12);
}

.sv-restaurant-copy b{
  color:#7f8ca0;
  font-weight:750;
}


/* NAVIGATION */

body.sv-premium-admin-ready .sidebar .nav{
  width:100%;
  min-height:45px;
  margin:3px 0;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:11px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#9da9b9;
  background:transparent;
  font-size:12px;
  line-height:1;
  font-weight:720;
  text-align:left;
  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

body.sv-premium-admin-ready .sidebar .nav:hover{
  color:#fff;
  background:rgba(255,255,255,.055);
  transform:translateX(2px);
}

body.sv-premium-admin-ready .sidebar .nav.active{
  color:#fff;
  background:
    linear-gradient(
      90deg,
      rgba(29,177,120,.19),
      rgba(255,255,255,.06)
    );
  border-color:rgba(41,202,140,.18);
  box-shadow:
    inset 3px 0 0 #24bf82;
}

.sv-nav-icon{
  width:27px;
  height:27px;
  flex:0 0 27px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.045);
  color:#8997aa;
  font-size:13px;
  font-weight:900;
}

.nav.active .sv-nav-icon{
  background:rgba(36,191,130,.15);
  color:#35d398;
}

.sv-nav-label{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sv-nav-section-label{
  margin:17px 11px 6px;
  color:#526177;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

body.sv-premium-admin-ready .sidebar .ai-badge{
  margin-left:auto;
}


/* LOGOUT */

body.sv-premium-admin-ready .sidebar .logout,
body.sv-premium-admin-ready .sidebar button.logout{
  min-height:43px;
  border-radius:11px;
}


/* PREMIUM TOP SHELL */

.sv-admin-shell-top{
  min-width:0;
  min-height:118px;
  margin:0 -2px 22px;
  padding:22px 2px 18px;
  border-bottom:1px solid var(--sv-shell-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

.sv-admin-context{
  min-width:0;
}

.sv-admin-context-eyebrow{
  display:block;
  margin-bottom:6px;
  color:#8a96a2;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
}

.sv-admin-context-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
}

.sv-admin-context-title h1{
  min-width:0;
  margin:0;
  color:#16212d;
  font-size:clamp(24px,2.5vw,32px);
  line-height:1.08;
  letter-spacing:-.035em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sv-admin-context p{
  max-width:700px;
  margin:7px 0 0;
  color:#788491;
  font-size:12px;
  line-height:1.45;
}

.sv-admin-live-pill{
  flex:0 0 auto;
  min-height:28px;
  padding:0 10px;
  border:1px solid #d7eee3;
  border-radius:999px;
  background:#edf9f3;
  color:#168b5d;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:850;
}

.sv-admin-live-pill i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1ebc7a;
  box-shadow:
    0 0 0 4px rgba(30,188,122,.10);
}

.sv-admin-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.sv-admin-action-btn{
  appearance:none;
  min-height:42px;
  padding:0 13px;
  border:1px solid var(--sv-shell-border);
  border-radius:11px;
  background:#fff;
  color:#46515c;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 3px 12px rgba(20,30,40,.025);
}

.sv-admin-action-btn:hover{
  border-color:#cfd6dc;
  background:#fafbfc;
}

.sv-admin-action-btn.active{
  border-color:#bce5d2;
  background:#ecf9f3;
  color:#16895d;
}

.sv-admin-action-btn.is-off{
  color:#a06868;
}

.sv-action-icon{
  font-size:14px;
}

.sv-admin-clock{
  min-width:70px;
  padding-left:11px;
  border-left:1px solid var(--sv-shell-border);
  text-align:right;
}

.sv-admin-clock strong{
  display:block;
  color:#17222d;
  font-size:15px;
  line-height:1.1;
}

.sv-admin-clock span{
  display:block;
  margin-top:4px;
  color:#8a949e;
  font-size:9px;
  font-weight:750;
}


/* REMOVE DUPLICATED OLD TOPBAR VISUALLY,
   WITHOUT REMOVING ITS DOM OR JS CONTRACT */

body.sv-premium-admin-ready
.sv-legacy-dashboard-topbar{
  margin-top:0;
}


/* EXISTING PANELS JOIN NEW DESIGN SYSTEM */

body.sv-premium-admin-ready .panel{
  min-width:0;
}

body.sv-premium-admin-ready
.panel > .card,
body.sv-premium-admin-ready
.dashboard-card{
  border-color:var(--sv-shell-border);
  box-shadow:var(--sv-shell-shadow);
}


/* KITCHEN MODE */

body.sv-kitchen-mode .sidebar{
  width:78px;
  padding-left:12px;
  padding-right:12px;
}

body.sv-kitchen-mode .main{
  margin-left:78px;
  width:calc(100% - 78px);
}

body.sv-kitchen-mode .sv-brand-copy,
body.sv-kitchen-mode .sv-restaurant-copy,
body.sv-kitchen-mode .sv-nav-label,
body.sv-kitchen-mode .sv-nav-section-label,
body.sv-kitchen-mode .sidebar .ai-badge{
  display:none !important;
}

body.sv-kitchen-mode
.sidebar .side-brand{
  justify-content:center;
  padding-left:0;
  padding-right:0;
}

body.sv-kitchen-mode
.sv-sidebar-restaurant{
  justify-content:center;
  padding:8px;
}

body.sv-kitchen-mode
.sidebar .nav{
  justify-content:center;
  padding-left:0;
  padding-right:0;
}

body.sv-kitchen-mode
.sv-nav-icon{
  width:34px;
  height:34px;
  flex-basis:34px;
}


/* MOBILE HEADER HIDDEN ON DESKTOP */

.sv-admin-mobile-head,
.sv-mobile-overlay{
  display:none;
}


/* =========================================================
   TABLET 761–1200
   ========================================================= */

@media (min-width:761px) and (max-width:1200px){

  body.sv-premium-admin-ready .sidebar{
    width:196px;
    padding-left:13px;
    padding-right:13px;
  }

  body.sv-premium-admin-ready .main{
    margin-left:196px;
    width:calc(100% - 196px);
    padding-left:18px;
    padding-right:18px;
  }

  .sv-brand-copy small{
    display:none;
  }

  .sv-restaurant-copy strong{
    max-width:102px;
  }

  body.sv-premium-admin-ready
  .sidebar .nav{
    min-height:48px;
    padding-left:9px;
    padding-right:9px;
  }

  .sv-admin-shell-top{
    min-height:105px;
    margin-bottom:16px;
    padding-top:17px;
    padding-bottom:15px;
  }

  .sv-admin-context p{
    max-width:430px;
  }

  .sv-admin-action-btn{
    min-width:44px;
    min-height:46px;
    padding:0 11px;
  }

  .sv-admin-action-btn > span:last-child{
    display:none;
  }

  .sv-admin-clock{
    display:none;
  }

  body.sv-kitchen-mode .sidebar{
    width:72px;
  }

  body.sv-kitchen-mode .main{
    margin-left:72px;
    width:calc(100% - 72px);
  }
}


/* =========================================================
   MOBILE <=760
   ========================================================= */

@media (max-width:760px){

  body.sv-premium-admin-ready{
    padding-top:64px;
    overflow-x:hidden;
  }

  body.sv-premium-admin-ready .main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    padding:
      0
      12px
      100px !important;
    overflow-x:hidden;
  }

  .sv-admin-mobile-head{
    position:fixed;
    z-index:10020;
    top:0;
    left:0;
    right:0;
    height:64px;
    padding:
      env(safe-area-inset-top,0)
      12px
      0;
    border-bottom:1px solid #e4e8ec;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    box-shadow:0 5px 22px rgba(18,29,42,.055);
  }

  .sv-mobile-menu-btn{
    appearance:none;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid #e3e7eb;
    border-radius:12px;
    background:#fff;
    display:grid;
    place-content:center;
    gap:4px;
  }

  .sv-mobile-menu-btn span{
    width:17px;
    height:2px;
    border-radius:2px;
    background:#25313d;
  }

  .sv-mobile-brand{
    min-width:0;
  }

  .sv-mobile-brand strong{
    display:block;
    color:#14202c;
    font-size:15px;
    line-height:1.05;
  }

  .sv-mobile-brand span{
    display:block;
    margin-top:3px;
    color:#87919c;
    font-size:9px;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .sv-mobile-live{
    min-height:31px;
    padding:0 9px;
    border-radius:999px;
    background:#edf9f3;
    color:#168a5c;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:9px;
    font-weight:850;
  }

  .sv-mobile-live i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#1dbb79;
  }

  body.sv-premium-admin-ready .sidebar{
    position:fixed !important;
    z-index:10030 !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:min(82vw,292px) !important;
    max-width:292px !important;
    height:100dvh !important;
    margin:0 !important;
    padding:
      calc(18px + env(safe-area-inset-top,0))
      14px
      calc(20px + env(safe-area-inset-bottom,0)) !important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:20px 0 50px rgba(10,18,30,.24);
  }

  body.sv-premium-admin-ready
  .sidebar.sv-mobile-open{
    transform:translateX(0);
  }

  body.sv-premium-admin-ready
  .sidebar .nav{
    min-height:50px;
    font-size:13px;
  }

  .sv-nav-icon{
    width:31px;
    height:31px;
    flex-basis:31px;
  }

  .sv-mobile-overlay{
    position:fixed;
    z-index:10025;
    inset:0;
    background:rgba(8,15,25,.46);
    backdrop-filter:blur(2px);
  }

  body.sv-menu-open
  .sv-mobile-overlay{
    display:block;
  }

  body.sv-menu-open{
    overflow:hidden;
  }

  .sv-admin-shell-top{
    width:100%;
    min-width:0;
    min-height:0;
    margin:0 0 13px;
    padding:17px 2px 14px;
    display:block;
  }

  .sv-admin-context-eyebrow{
    margin-bottom:5px;
    font-size:8px;
  }

  .sv-admin-context-title{
    gap:8px;
  }

  .sv-admin-context-title h1{
    font-size:23px;
  }

  .sv-admin-live-pill{
    min-height:25px;
    padding:0 8px;
    font-size:9px;
  }

  .sv-admin-context p{
    margin-top:6px;
    font-size:11px;
  }

  .sv-admin-actions{
    margin-top:13px;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .sv-admin-action-btn{
    width:100%;
    min-width:0;
    min-height:46px;
    justify-content:center;
  }

  .sv-admin-clock{
    display:none;
  }

  body.sv-kitchen-mode .sidebar{
    width:min(82vw,292px) !important;
  }

  body.sv-kitchen-mode .main{
    margin-left:0 !important;
    width:100% !important;
  }

  body.sv-kitchen-mode .sv-brand-copy,
  body.sv-kitchen-mode .sv-restaurant-copy,
  body.sv-kitchen-mode .sv-nav-label,
  body.sv-kitchen-mode .sv-nav-section-label{
    display:block !important;
  }

  body.sv-kitchen-mode
  .sidebar .nav{
    justify-content:flex-start;
    padding-left:11px;
    padding-right:11px;
  }

  body.sv-kitchen-mode
  .sidebar .side-brand{
    justify-content:flex-start;
  }

  body.sv-kitchen-mode
  .sv-sidebar-restaurant{
    justify-content:flex-start;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:420px){

  .sv-admin-context-title{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .sv-admin-context-title h1{
    flex:1 1 100%;
  }

  .sv-admin-live-pill{
    order:2;
  }

  .sv-admin-actions{
    grid-template-columns:1fr 1fr;
  }
}

/* SERVELIO ADMIN SHELL PREMIUM V1 END */


/* SERVELIO ADMIN SHELL PREMIUM V2 SAFE START */


/* =========================================================
   HEADER COLLISION FIX
   ========================================================= */

body.sv-admin-v2-safe
.sv-admin-shell-top{
  position:relative;
  box-sizing:border-box;
  padding-right:158px;
}

body.sv-admin-v2-safe
.sv-admin-shell-top
.sv-admin-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  max-width:100%;
}

body.sv-admin-v2-safe
.sv-admin-shell-top
.sv-admin-action-btn{
  flex:0 0 auto;
  white-space:nowrap;
}


/* =========================================================
   LIVE ORDERS PRIMARY NAV
   ========================================================= */

body.sv-admin-v2-safe
.sidebar
.nav.sv-v2-safe-live-nav{
  position:relative;
}

body.sv-admin-v2-safe
.sidebar
.nav.sv-v2-safe-live-nav::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 5px 5px 0;
  background:#24d292;
  opacity:.72;
}

body.sv-admin-v2-safe
.sidebar
.nav.sv-v2-safe-live-nav.active{
  background:
    linear-gradient(
      90deg,
      rgba(25,198,137,.20),
      rgba(255,255,255,.055)
    );
  border-color:
    rgba(49,215,157,.20);
}


/* =========================================================
   SAFE LIVE INDICATOR
   ========================================================= */

.sv-v2-safe-badge{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  min-width:18px;
  height:18px;
  border-radius:999px;
  background:
    rgba(36,210,146,.11);
  border:
    1px solid rgba(36,210,146,.20);
}

.sv-v2-safe-live-dot{
  display:block;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#24d292;
  box-shadow:
    0 0 0 3px
    rgba(36,210,146,.10);
}


/* =========================================================
   RESTAURANT LOGO
   ========================================================= */

body.sv-admin-v2-safe
#svSidebarLogo{
  overflow:hidden;
}

body.sv-admin-v2-safe
#svSidebarLogo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
}


/* =========================================================
   LIVE ORDERS WORKSPACE
   ========================================================= */

body.sv-admin-v2-safe
#ordersView{
  width:100%;
  max-width:100%;
  min-width:0;
}

body.sv-admin-v2-safe
#ordersView:not(.hidden){
  animation:
    svSafeOrdersEnter
    .16s ease-out;
}

@keyframes svSafeOrdersEnter{
  from{
    opacity:.72;
    transform:translateY(2px);
  }

  to{
    opacity:1;
    transform:none;
  }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width:1201px){

  body.sv-admin-v2-safe
  .sv-admin-shell-top{
    padding-right:170px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media
(min-width:761px)
and
(max-width:1200px){

  body.sv-admin-v2-safe
  .sv-admin-shell-top{
    padding-right:125px;
  }

  body.sv-admin-v2-safe
  .sv-admin-shell-top
  .sv-admin-actions{
    gap:6px;
  }

  body.sv-admin-v2-safe
  .sv-admin-shell-top
  .sv-admin-action-btn{
    min-width:42px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px){

  body.sv-admin-v2-safe
  .sv-admin-shell-top{
    padding-right:0;
  }

  body.sv-admin-v2-safe
  .sv-admin-shell-top
  .sv-admin-actions{
    width:100%;
    flex-wrap:wrap;
    justify-content:flex-start;
  }

  body.sv-admin-v2-safe
  #ordersView{
    overflow-x:hidden;
  }

}


/* SERVELIO ADMIN SHELL PREMIUM V2 SAFE END */

/* SERVELIO ADMIN PREMIUM OPERATIONS V3 CSS START */

:root{
  --sv3-bg:#f5f7fb;
  --sv3-surface:#ffffff;
  --sv3-surface-soft:#f8fafc;
  --sv3-border:#e6eaf0;
  --sv3-text:#111827;
  --sv3-muted:#667085;
  --sv3-dark:#101828;
  --sv3-accent:#00bfa6;
  --sv3-accent-soft:rgba(0,191,166,.11);
  --sv3-success:#12b76a;
  --sv3-shadow:
    0 10px 35px rgba(16,24,40,.07);
}


/* ----------------------------------------------------------
   APP SURFACE
---------------------------------------------------------- */

.servelio-admin-v3-body{
  background:var(--sv3-bg);
}

.servelio-admin-v3-body .main{
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0,191,166,.045),
      transparent 28rem
    ),
    var(--sv3-bg);
}


/* ----------------------------------------------------------
   SIDEBAR RESTAURANT WORKSPACE
---------------------------------------------------------- */

.sv3-workspace{
  margin:12px 12px 18px;
  padding:15px;
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.045)
    );
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

.sv3-workspace-top{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}

.sv3-restaurant-logo{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:13px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(
      145deg,
      #15d8bd,
      #00a891
    );
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:
    0 7px 20px rgba(0,191,166,.22);
}

.sv3-restaurant-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sv3-restaurant-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.sv3-restaurant-copy small{
  color:rgba(255,255,255,.52);
  font-size:10px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
}

.sv3-restaurant-copy strong{
  color:#fff;
  font-size:14px;
  line-height:1.3;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sv3-status-row{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  padding-top:11px;
  border-top:
    1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.58);
  font-size:10px;
}

.sv3-status-row strong{
  color:#7fffd4;
  font-weight:800;
}

.sv3-online-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#21d07a;
  box-shadow:
    0 0 0 4px rgba(33,208,122,.10);
}

.sv3-status-separator{
  opacity:.45;
}


/* ----------------------------------------------------------
   NAVIGATION REFINEMENT
---------------------------------------------------------- */

.servelio-admin-v3-body .sidebar .nav{
  position:relative;
  margin-left:10px;
  margin-right:10px;
  border-radius:12px;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.servelio-admin-v3-body .sidebar .nav:hover{
  transform:translateX(2px);
}

.servelio-admin-v3-body .sidebar .nav.active::before{
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  width:3px;
  height:24px;
  transform:translateY(-50%);
  border-radius:0 5px 5px 0;
  background:var(--sv3-accent);
  box-shadow:
    0 0 15px rgba(0,191,166,.38);
}


/* ----------------------------------------------------------
   LIVE ORDERS PREMIUM HEADER
---------------------------------------------------------- */

#ordersView{
  position:relative;
}

.sv3-operations-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:0 0 14px;
  padding:5px 2px 3px;
}

.sv3-operations-copy{
  min-width:0;
}

.sv3-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  color:#087f6e;
  font-size:11px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.sv3-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sv3-success);
  box-shadow:
    0 0 0 5px rgba(18,183,106,.10);
}

.sv3-operations-copy h1{
  margin:0;
  color:var(--sv3-dark);
  font-size:
    clamp(25px,2.2vw,34px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:900;
}

.sv3-operations-copy p{
  margin:7px 0 0;
  color:var(--sv3-muted);
  font-size:13px;
  line-height:1.5;
}

.sv3-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.sv3-action{
  min-height:42px;
  border-radius:12px;
  padding:0 14px;
  border:1px solid var(--sv3-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  font:inherit;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.sv3-action:hover{
  transform:translateY(-1px);
}

.sv3-action strong{
  font-size:12px;
  font-weight:800;
}

.sv3-action-secondary{
  color:#344054;
  background:#fff;
}

.sv3-action-secondary:hover{
  border-color:#cfd6df;
  box-shadow:
    0 5px 18px rgba(16,24,40,.06);
}

.sv3-action-primary{
  color:#fff;
  border-color:#111827;
  background:#111827;
  box-shadow:
    0 8px 18px rgba(17,24,39,.14);
}

.sv3-action-primary.is-loading span{
  animation:
    sv3Spin .55s linear infinite;
}

@keyframes sv3Spin{
  to{
    transform:rotate(360deg);
  }
}


/* ----------------------------------------------------------
   OPERATION STATUS STRIP
---------------------------------------------------------- */

.sv3-operational-strip{
  min-height:64px;
  margin-bottom:15px;
  padding:10px 12px;
  border:1px solid var(--sv3-border);
  border-radius:17px;
  background:
    rgba(255,255,255,.92);
  box-shadow:
    0 5px 22px rgba(16,24,40,.045);
  display:flex;
  align-items:center;
  gap:14px;
}

.sv3-strip-status,
.sv3-strip-item{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.sv3-strip-status > div,
.sv3-strip-item > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.sv3-strip-status small,
.sv3-strip-item small{
  color:#98a2b3;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.sv3-strip-status strong,
.sv3-strip-item strong{
  color:#344054;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.sv3-strip-icon{
  width:31px;
  height:31px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#087f5b;
  background:#ecfdf3;
  font-weight:900;
}

.sv3-strip-pulse{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--sv3-success);
  box-shadow:
    0 0 0 5px rgba(18,183,106,.10);
}

.sv3-strip-divider{
  width:1px;
  height:31px;
  background:#eaecf0;
}

.sv3-strip-spacer{
  flex:1;
}

.sv3-kitchen-button{
  min-height:39px;
  padding:0 14px;
  border:1px solid #d0d5dd;
  border-radius:11px;
  color:#344054;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}


/* ----------------------------------------------------------
   EXISTING LIVE ORDER SURFACE REFINEMENT
---------------------------------------------------------- */

.servelio-admin-v3-body #ordersView .panel,
.servelio-admin-v3-body #ordersView .card{
  border-color:#e8ecf2;
}

.servelio-admin-v3-body #ordersView button{
  touch-action:manipulation;
}

.servelio-admin-v3-body #ordersView{
  -webkit-font-smoothing:antialiased;
}


/* ----------------------------------------------------------
   TABLET
   761px — 1200px
---------------------------------------------------------- */

@media
(min-width:761px)
and
(max-width:1200px){

  .sv3-workspace{
    margin:
      10px 8px 16px;
    padding:12px;
  }

  .sv3-restaurant-logo{
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:11px;
  }

  .sv3-operations-header{
    align-items:flex-start;
  }

  .sv3-header-actions{
    max-width:330px;
  }

  .sv3-action{
    min-height:44px;
  }

  .sv3-operational-strip{
    min-height:66px;
  }

  .sv3-kitchen-button{
    min-height:44px;
  }

}


/* ----------------------------------------------------------
   MOBILE
   <= 760px
---------------------------------------------------------- */

@media
(max-width:760px){

  .sv3-workspace{
    margin:
      8px 8px 13px;
  }

  .sv3-status-row{
    display:none;
  }

  .sv3-operations-header{
    display:block;
    margin-bottom:12px;
  }

  .sv3-operations-copy h1{
    font-size:25px;
  }

  .sv3-operations-copy p{
    font-size:12px;
  }

  .sv3-header-actions{
    width:100%;
    margin-top:14px;
    display:grid;
    grid-template-columns:
      repeat(3,minmax(0,1fr));
    gap:7px;
  }

  .sv3-action{
    width:100%;
    min-width:0;
    min-height:44px;
    padding:0 8px;
  }

  .sv3-action strong{
    font-size:10px;
  }

  .sv3-operational-strip{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    gap:11px;
    padding:10px;
  }

  .sv3-operational-strip::-webkit-scrollbar{
    display:none;
  }

  .sv3-strip-divider{
    flex:0 0 1px;
  }

  .sv3-strip-status,
  .sv3-strip-item{
    flex:0 0 auto;
  }

  .sv3-strip-spacer{
    display:none;
  }

  .sv3-kitchen-button{
    flex:0 0 auto;
    min-height:44px;
  }

}


/* ----------------------------------------------------------
   LARGE DESKTOP
---------------------------------------------------------- */

@media
(min-width:1201px){

  .sv3-operations-header{
    min-height:74px;
  }

  .sv3-operational-strip{
    min-height:66px;
  }

}


/* SERVELIO ADMIN PREMIUM OPERATIONS V3 CSS END */



/* SERVELIO GLOBAL LEFT GAP FIX V1 START */

/*
   Servelio Restaurant Admin
   Global shell geometry correction.

   .app is already a flex container.
   Sidebar participates in normal flex layout.
   Therefore .main must NOT reserve sidebar width again.
*/

/* ----------------------------------------------------------
   DESKTOP >= 1201
---------------------------------------------------------- */

@media (min-width:1201px){

  body.sv-premium-admin-ready .sidebar{
    flex:0 0 240px !important;
    width:240px !important;
    min-width:240px !important;
    max-width:240px !important;
  }

  body.sv-premium-admin-ready .main{
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:
      clamp(18px,2.2vw,34px) !important;

    padding-right:
      clamp(18px,2.2vw,34px) !important;
  }

}


/* ----------------------------------------------------------
   TABLET 761 — 1200
---------------------------------------------------------- */

@media
(min-width:761px)
and
(max-width:1200px){

  body.sv-premium-admin-ready .sidebar{
    flex:0 0 196px !important;
    width:196px !important;
    min-width:196px !important;
    max-width:196px !important;
  }

  body.sv-premium-admin-ready .main{
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:18px !important;
    padding-right:18px !important;
  }

}


/* ----------------------------------------------------------
   MOBILE <= 760
   Sidebar is off-canvas here.
   Existing mobile architecture preserved.
---------------------------------------------------------- */

@media (max-width:760px){

  body.sv-premium-admin-ready .main{
    flex:1 1 100% !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:12px !important;
    padding-right:12px !important;
  }

}


/* ----------------------------------------------------------
   KITCHEN MODE — DESKTOP/TABLET
   Existing collapsed sidebar geometry preserved,
   but no duplicate main offset.
---------------------------------------------------------- */

@media (min-width:761px){

  body.sv-premium-admin-ready.sv-kitchen-mode .main,
  body.sv-premium-admin-ready.sv-kitchen-mode .main{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    margin-left:0 !important;
  }

}


/* ----------------------------------------------------------
   GLOBAL SAFETY
---------------------------------------------------------- */

body.sv-premium-admin-ready #appView.app{
  width:100%;
  max-width:100%;
  min-width:0;
}

body.sv-premium-admin-ready .main > section{
  max-width:100%;
  min-width:0;
}

/* SERVELIO GLOBAL LEFT GAP FIX V1 END */






/* SERVELIO GLOBAL SINGLE PAGE HEADER V1 CSS START */


/* ==========================================================
   SERVELIO ADMIN — ONE PAGE TITLE SYSTEM

   Premium global shell = page title owner.
   Legacy view title = hidden.

   Functional subheadings remain untouched.
========================================================== */


/* ----------------------------------------------------------
   Legacy heading
---------------------------------------------------------- */

body.sv-global-single-header-ready
.sv-global-legacy-page-title{
  display:none !important;
}


/* ----------------------------------------------------------
   Small legacy header wrapper
---------------------------------------------------------- */

body.sv-global-single-header-ready
.sv-global-legacy-page-header{
  display:none !important;
}


/* ----------------------------------------------------------
   Keep actual views flush after legacy heading removal
---------------------------------------------------------- */

body.sv-global-single-header-ready
.main > section{
  margin-top:0 !important;
}


/* ----------------------------------------------------------
   ORDERS

   The page-level title is now provided by Premium Shell.
   Operational content remains visible.
---------------------------------------------------------- */

body.sv-global-single-header-ready
#ordersView{
  padding-top:0 !important;
}


/* Never hide operational buttons */
body.sv-global-single-header-ready
#ordersView button,
body.sv-global-single-header-ready
#ordersView [role="button"]{
  visibility:visible;
}


/* ----------------------------------------------------------
   PRODUCTS / CATEGORIES / STAFF / SETTINGS

   Keep content aligned after title removal.
---------------------------------------------------------- */

body.sv-global-single-header-ready
#productsView,
body.sv-global-single-header-ready
#categoriesView,
body.sv-global-single-header-ready
#staffView,
body.sv-global-single-header-ready
#personnelView,
body.sv-global-single-header-ready
#settingsView{
  padding-top:0 !important;
}


/* ----------------------------------------------------------
   DESKTOP >= 1201
---------------------------------------------------------- */

@media (min-width:1201px){

  body.sv-global-single-header-ready
  .main > section{
    width:100%;
    max-width:100%;
  }

}


/* ----------------------------------------------------------
   TABLET 761 - 1200
---------------------------------------------------------- */

@media
(min-width:761px)
and
(max-width:1200px){

  body.sv-global-single-header-ready
  .main > section{
    width:100%;
    max-width:100%;
  }

}


/* ----------------------------------------------------------
   MOBILE <= 760
---------------------------------------------------------- */

@media (max-width:760px){

  body.sv-global-single-header-ready
  .main > section{
    width:100%;
    max-width:100%;
    min-width:0;
  }

}


/* SERVELIO GLOBAL SINGLE PAGE HEADER V1 CSS END */


/* SERVELIO LIVE ORDERS INNER HEADER FINAL V1 START */


/* ==========================================================
   LIVE ORDERS

   Premium Shell already owns the page title:

       Canlı Siparişler
       Yeni siparişleri anında görün...

   The Live Orders module also renders its own header:

       ● Canlı Siparişler
         Tüm aktif siparişleri...
                       Restoran açık / Yenile

   We remove ONLY the left duplicate copy.

   The right operational controls remain.
========================================================== */


/* ----------------------------------------------------------
   1. KEEP THE REAL LIVE ORDERS HEADER CONTAINER

   Do NOT display:none the complete header because the
   restaurant-open and refresh controls live here.
---------------------------------------------------------- */

body.sv-global-single-header-ready
#ordersView .live-orders-header{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;

  min-height:0 !important;

  margin-top:0 !important;
  margin-bottom:14px !important;

  padding-top:0 !important;
  padding-bottom:0 !important;

  gap:12px !important;
}


/* ----------------------------------------------------------
   2. REMOVE ONLY LEFT DUPLICATE TITLE BLOCK

   Contract inspection confirmed the title/copy is the
   first child of .live-orders-header.

   This is the exact module structure we want to suppress.
---------------------------------------------------------- */

body.sv-global-single-header-ready
#ordersView
.live-orders-header
> div:first-child{
  display:none !important;
}


/* ----------------------------------------------------------
   3. SAFETY

   Never hide controls even if older CSS targeted children.
---------------------------------------------------------- */

body.sv-global-single-header-ready
#ordersView
.live-orders-header
button,

body.sv-global-single-header-ready
#ordersView
.live-orders-header
a,

body.sv-global-single-header-ready
#ordersView
.live-orders-header
[role="button"]{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
}


/* ----------------------------------------------------------
   4. RIGHT ACTION AREA

   Let Restoran açık + Yenile stay together on the right.
---------------------------------------------------------- */

body.sv-global-single-header-ready
#ordersView
.live-orders-header
> div:last-child{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;

  margin-left:auto !important;

  gap:12px !important;
}


/* ----------------------------------------------------------
   5. REMOVE EMPTY VERTICAL SPACE

   Once duplicate title is gone, counters should move upward.
---------------------------------------------------------- */

body.sv-global-single-header-ready
#ordersView{
  padding-top:0 !important;
}


body.sv-global-single-header-ready
#ordersView
.live-orders-header
+ *{
  margin-top:0 !important;
}


/* ==========================================================
   DESKTOP >= 1201
========================================================== */

@media (min-width:1201px){

  body.sv-global-single-header-ready
  #ordersView
  .live-orders-header{
    min-height:46px !important;
  }

}


/* ==========================================================
   TABLET 761 - 1200
========================================================== */

@media
(min-width:761px)
and
(max-width:1200px){

  body.sv-global-single-header-ready
  #ordersView
  .live-orders-header{
    min-height:44px !important;
    flex-wrap:wrap !important;
  }

}


/* ==========================================================
   MOBILE <= 760
========================================================== */

@media (max-width:760px){

  body.sv-global-single-header-ready
  #ordersView
  .live-orders-header{
    min-height:0 !important;

    justify-content:flex-start !important;

    flex-wrap:wrap !important;

    margin-bottom:10px !important;
  }


  body.sv-global-single-header-ready
  #ordersView
  .live-orders-header
  > div:last-child{
    width:100% !important;

    justify-content:flex-start !important;

    margin-left:0 !important;

    flex-wrap:wrap !important;
  }

}


/* SERVELIO LIVE ORDERS INNER HEADER FINAL V1 END */


/* SERVELIO LIVE ORDERS REAL DUPLICATE HEADER FIX V1 START */

/* ==========================================================
   SERVELIO LIVE ORDERS
   SINGLE PAGE TITLE — FINAL SOURCE FIX

   Actual DOM generated by app.js:

   .sv-live-head
      .sv-live-title-wrap
         .sv-live-pulse
         h1
         .sv-live-sub

      .sv-live-head-actions
         .sv-live-status
         .sv-live-refresh

   Premium Admin Shell already owns the global page title.

   Therefore ONLY .sv-live-title-wrap is removed.

   Restaurant status + refresh button remain untouched.
========================================================== */


/* ----------------------------------------------------------
   1. REMOVE THE REAL DUPLICATE TITLE BLOCK
---------------------------------------------------------- */

#ordersView.sv-live-orders-v1
#svLiveOrdersApp
.sv-live-head
> .sv-live-title-wrap{
  display:none !important;
}


/* ----------------------------------------------------------
   2. KEEP REAL OPERATION CONTROLS
---------------------------------------------------------- */

#ordersView.sv-live-orders-v1
#svLiveOrdersApp
.sv-live-head{
  display:flex !important;

  align-items:center !important;
  justify-content:flex-end !important;

  width:100% !important;

  margin-top:0 !important;
  margin-bottom:14px !important;

  min-height:44px !important;

  gap:12px !important;
}


/* ----------------------------------------------------------
   3. RESTAURANT OPEN + REFRESH
---------------------------------------------------------- */

#ordersView.sv-live-orders-v1
#svLiveOrdersApp
.sv-live-head
> .sv-live-head-actions{
  display:flex !important;

  align-items:center !important;
  justify-content:flex-end !important;

  margin-left:auto !important;

  gap:12px !important;

  visibility:visible !important;
  opacity:1 !important;
}


/* ----------------------------------------------------------
   4. NEVER HIDE STATUS / REFRESH
---------------------------------------------------------- */

#ordersView.sv-live-orders-v1
#svLiveOrdersApp
.sv-live-status,

#ordersView.sv-live-orders-v1
#svLiveOrdersApp
.sv-live-refresh{
  visibility:visible !important;
  opacity:1 !important;
}


/* ==========================================================
   DESKTOP >= 1201
========================================================== */

@media (min-width:1201px){

  #ordersView.sv-live-orders-v1
  #svLiveOrdersApp
  .sv-live-head{
    min-height:44px !important;
    margin-bottom:14px !important;
  }

}


/* ==========================================================
   TABLET 761 — 1200
========================================================== */

@media
(min-width:761px)
and
(max-width:1200px){

  #ordersView.sv-live-orders-v1
  #svLiveOrdersApp
  .sv-live-head{
    min-height:42px !important;

    justify-content:flex-end !important;

    flex-wrap:wrap !important;
  }

  #ordersView.sv-live-orders-v1
  #svLiveOrdersApp
  .sv-live-head-actions{
    margin-left:auto !important;

    flex-wrap:wrap !important;
  }

}


/* ==========================================================
   MOBILE <= 760
========================================================== */

@media (max-width:760px){

  #ordersView.sv-live-orders-v1
  #svLiveOrdersApp
  .sv-live-head{
    min-height:0 !important;

    justify-content:flex-start !important;

    margin-bottom:10px !important;

    flex-wrap:wrap !important;
  }

  #ordersView.sv-live-orders-v1
  #svLiveOrdersApp
  .sv-live-head-actions{
    width:100% !important;

    margin-left:0 !important;

    justify-content:flex-start !important;

    flex-wrap:wrap !important;
  }

}


/* SERVELIO LIVE ORDERS REAL DUPLICATE HEADER FIX V1 END */


/* SERVELIO RESTAURANT OS PREMIUM DARK V1 START */

/* ==========================================================
   SERVELIO RESTAURANT OS
   PREMIUM DARK DESIGN SYSTEM V1

   VISUAL LAYER ONLY

   Keeps:
   - existing navigation
   - Live Orders runtime
   - order actions
   - courier flow
   - order detail
   - i18n
   - API contracts
   - Core / DB
========================================================== */

:root{
  --os-bg:#071018;
  --os-bg-2:#09141e;

  --os-sidebar:#07131c;
  --os-sidebar-2:#0a1924;

  --os-surface:#0d1b27;
  --os-surface-2:#102331;
  --os-surface-3:#142a39;

  --os-card:#122533;
  --os-card-hover:#172e3e;

  --os-line:rgba(255,255,255,.075);
  --os-line-strong:rgba(255,255,255,.12);

  --os-text:#f7fafc;
  --os-text-2:#d8e2ea;
  --os-muted:#8797a5;

  --os-turquoise:#10d4c5;
  --os-turquoise-2:#00b7aa;
  --os-turquoise-soft:rgba(16,212,197,.13);

  --os-red:#ff515d;
  --os-orange:#ffad32;
  --os-green:#2ed27f;
  --os-blue:#3f91ff;

  --os-shadow:
    0 20px 60px rgba(0,0,0,.25);

  --os-shadow-soft:
    0 8px 25px rgba(0,0,0,.18);

  --os-radius:18px;
  --os-radius-sm:12px;
}


/* ==========================================================
   GLOBAL
========================================================== */

html,
body{
  background:
    radial-gradient(
      circle at 75% -10%,
      rgba(16,212,197,.08),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--os-bg),
      var(--os-bg-2)
    ) !important;

  color:var(--os-text) !important;
}

body.sv-premium-admin-ready{
  background:
    radial-gradient(
      circle at 78% 0%,
      rgba(16,212,197,.075),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #071018 0%,
      #09151f 45%,
      #071018 100%
    ) !important;
}

body.sv-premium-admin-ready .app{
  background:transparent !important;
}


/* ==========================================================
   SIDEBAR
========================================================== */

body.sv-premium-admin-ready .sidebar{
  position:relative;

  background:
    linear-gradient(
      180deg,
      #06131c 0%,
      #081721 55%,
      #06121b 100%
    ) !important;

  border-right:
    1px solid var(--os-line) !important;

  box-shadow:
    14px 0 40px rgba(0,0,0,.16) !important;

  padding:
    22px 15px 18px !important;

  overflow:hidden;
}


/* subtle glow */

body.sv-premium-admin-ready .sidebar::before{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  left:-90px;
  top:-70px;

  border-radius:50%;

  background:
    rgba(16,212,197,.12);

  filter:blur(60px);

  pointer-events:none;
}


/* ==========================================================
   BRAND
========================================================== */

body.sv-premium-admin-ready .side-brand{
  position:relative;

  margin:
    0 5px 26px !important;

  padding:
    8px 8px 17px 52px !important;

  min-height:58px;

  color:#fff !important;

  font-size:25px !important;
  font-weight:900 !important;

  letter-spacing:-.7px;

  border-bottom:
    1px solid var(--os-line) !important;
}


/* Servelio S mark */

body.sv-premium-admin-ready .side-brand::before{
  content:"S";

  position:absolute;

  left:4px;
  top:1px;

  width:39px;
  height:39px;

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

  border-radius:13px;

  color:#06171b;

  font-size:25px;
  font-weight:1000;
  font-style:italic;

  background:
    linear-gradient(
      145deg,
      #5ef6e8,
      #08c6b8 55%,
      #00998f
    );

  box-shadow:
    0 8px 24px rgba(16,212,197,.22);
}


body.sv-premium-admin-ready .side-brand::after{
  content:"Restaurant Panel";

  position:absolute;

  left:53px;
  top:37px;

  color:#758897;

  font-size:10px;
  font-weight:700;

  letter-spacing:.15px;
}


/* ==========================================================
   NAVIGATION
========================================================== */

body.sv-premium-admin-ready .sidebar nav{
  position:relative;

  display:flex !important;
  flex-direction:column !important;

  gap:5px !important;

  z-index:2;
}


body.sv-premium-admin-ready .sidebar .nav{
  position:relative;

  min-height:44px;

  display:flex !important;
  align-items:center !important;

  padding:
    0 13px !important;

  border:
    1px solid transparent !important;

  border-radius:
    11px !important;

  background:
    transparent !important;

  color:
    #a8b5c0 !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease !important;
}


body.sv-premium-admin-ready .sidebar .nav:hover{
  color:#fff !important;

  background:
    rgba(255,255,255,.045) !important;

  border-color:
    rgba(255,255,255,.05) !important;

  transform:
    translateX(2px);
}


body.sv-premium-admin-ready .sidebar .nav.active{
  color:
    var(--os-turquoise) !important;

  background:
    linear-gradient(
      90deg,
      rgba(16,212,197,.16),
      rgba(16,212,197,.06)
    ) !important;

  border-color:
    rgba(16,212,197,.15) !important;

  box-shadow:
    inset 3px 0 0 var(--os-turquoise);
}


/* AI badge */

body.sv-premium-admin-ready .ai-badge{
  margin-left:auto !important;

  background:
    var(--os-red) !important;

  color:#fff !important;

  box-shadow:
    0 4px 14px rgba(255,81,93,.28);
}


/* logout */

body.sv-premium-admin-ready .logout{
  position:relative;

  z-index:2;

  margin-top:auto !important;

  min-height:42px;

  background:
    rgba(255,81,93,.08) !important;

  color:
    #ff929a !important;

  border:
    1px solid rgba(255,81,93,.13) !important;

  border-radius:
    11px !important;

  font-weight:
    800 !important;
}


body.sv-premium-admin-ready .logout:hover{
  background:
    rgba(255,81,93,.14) !important;
}


/* ==========================================================
   MAIN WORKSPACE
========================================================== */

body.sv-premium-admin-ready .main{
  min-width:0 !important;

  padding:
    18px 20px 28px !important;

  background:
    transparent !important;
}


/* ==========================================================
   PREMIUM TOP OPERATION BAR
========================================================== */

body.sv-premium-admin-ready
.sv-admin-shell-top{
  min-height:82px;

  margin:
    0 0 15px !important;

  padding:
    14px 16px 14px 19px !important;

  display:flex !important;
  align-items:center !important;

  background:
    linear-gradient(
      135deg,
      rgba(14,31,43,.96),
      rgba(11,25,36,.96)
    ) !important;

  border:
    1px solid var(--os-line) !important;

  border-radius:
    15px !important;

  box-shadow:
    var(--os-shadow-soft) !important;
}


body.sv-premium-admin-ready
.sv-admin-context-eyebrow{
  color:
    var(--os-turquoise) !important;

  font-size:
    9px !important;

  letter-spacing:
    1.5px !important;

  font-weight:
    900 !important;
}


body.sv-premium-admin-ready
.sv-admin-context-title{
  display:flex !important;

  align-items:center !important;

  gap:9px !important;
}


body.sv-premium-admin-ready
.sv-admin-context-title h1{
  color:#fff !important;

  margin:
    2px 0 0 !important;

  font-size:
    clamp(20px,2vw,28px) !important;

  line-height:
    1.05 !important;

  letter-spacing:
    -.65px !important;
}


body.sv-premium-admin-ready
.sv-admin-context > p{
  color:
    var(--os-muted) !important;

  margin:
    5px 0 0 !important;

  font-size:
    11px !important;
}


body.sv-premium-admin-ready
.sv-admin-live-pill{
  background:
    rgba(46,210,127,.11) !important;

  border:
    1px solid rgba(46,210,127,.17) !important;

  color:
    #74eba8 !important;

  border-radius:
    999px !important;

  padding:
    5px 9px !important;

  font-size:
    10px !important;

  font-weight:
    900 !important;
}


body.sv-premium-admin-ready
.sv-admin-live-pill i{
  background:
    var(--os-green) !important;

  box-shadow:
    0 0 0 4px rgba(46,210,127,.10);
}


/* ==========================================================
   TOP ACTIONS
========================================================== */

body.sv-premium-admin-ready
.sv-admin-actions{
  display:flex !important;

  align-items:center !important;

  gap:7px !important;
}


body.sv-premium-admin-ready
.sv-admin-action-btn{
  min-height:
    42px !important;

  padding:
    0 12px !important;

  background:
    rgba(255,255,255,.045) !important;

  color:
    #dce5eb !important;

  border:
    1px solid var(--os-line) !important;

  border-radius:
    10px !important;

  font-size:
    11px !important;

  font-weight:
    800 !important;

  box-shadow:
    none !important;
}


body.sv-premium-admin-ready
.sv-admin-action-btn:hover{
  background:
    rgba(255,255,255,.075) !important;

  border-color:
    rgba(16,212,197,.20) !important;
}


body.sv-premium-admin-ready
.sv-kitchen-btn{
  background:
    linear-gradient(
      135deg,
      rgba(29,69,99,.75),
      rgba(22,52,76,.75)
    ) !important;
}


body.sv-premium-admin-ready
.sv-admin-clock{
  color:#fff !important;

  border-left:
    1px solid var(--os-line) !important;

  padding-left:
    12px !important;
}


body.sv-premium-admin-ready
.sv-admin-clock span{
  color:
    var(--os-muted) !important;
}


/* ==========================================================
   GENERAL VIEW / PANEL SURFACES
========================================================== */

body.sv-premium-admin-ready
.main > section.panel:not(#ordersView){
  background:
    linear-gradient(
      145deg,
      rgba(15,32,44,.98),
      rgba(12,27,38,.98)
    ) !important;

  color:
    var(--os-text) !important;

  border:
    1px solid var(--os-line) !important;

  border-radius:
    var(--os-radius) !important;

  box-shadow:
    var(--os-shadow-soft) !important;
}


body.sv-premium-admin-ready
.panel-head{
  border-color:
    var(--os-line) !important;
}


body.sv-premium-admin-ready
.panel h1,
body.sv-premium-admin-ready
.panel h2,
body.sv-premium-admin-ready
.panel h3,
body.sv-premium-admin-ready
.panel h4{
  color:
    var(--os-text) !important;
}


body.sv-premium-admin-ready
.muted{
  color:
    var(--os-muted) !important;
}


/* ==========================================================
   DASHBOARD CARDS
========================================================== */

body.sv-premium-admin-ready
.dashboard-stat-card,
body.sv-premium-admin-ready
.dashboard-panel-card,
body.sv-premium-admin-ready
.analytics-card,
body.sv-premium-admin-ready
.sv-readiness-card{
  background:
    linear-gradient(
      145deg,
      rgba(19,42,56,.96),
      rgba(14,32,44,.96)
    ) !important;

  color:
    var(--os-text) !important;

  border:
    1px solid var(--os-line) !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.13) !important;
}


body.sv-premium-admin-ready
.dashboard-stat-card strong,
body.sv-premium-admin-ready
.dashboard-panel-card strong,
body.sv-premium-admin-ready
.analytics-card strong{
  color:#fff !important;
}


/* ==========================================================
   LIVE ORDERS — DARK OS
========================================================== */

body.sv-premium-admin-ready
#ordersView.sv-live-orders-v1{
  background:
    transparent !important;

  min-height:
    calc(100vh - 118px) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp{
  --sv-bg:transparent;
  --sv-card:#122634;
  --sv-text:#f7fafc;
  --sv-muted:#8ea0ad;
  --sv-line:rgba(255,255,255,.075);
  --sv-brand:#10d4c5;
  --sv-brand-dark:#00a99d;
  --sv-green:#2ed27f;
  --sv-red:#ff515d;
  --sv-orange:#ffad32;
  --sv-blue:#3f91ff;

  background:
    transparent !important;

  color:
    var(--os-text) !important;
}


/* ==========================================================
   LIVE ORDERS MAIN SHELL
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-shell{
  background:
    linear-gradient(
      145deg,
      rgba(13,29,41,.98),
      rgba(10,24,34,.98)
    ) !important;

  border:
    1px solid var(--os-line) !important;

  border-radius:
    17px !important;

  box-shadow:
    var(--os-shadow) !important;
}


/* ==========================================================
   LIVE ORDERS HEADER
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-head{
  border-color:
    var(--os-line) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-status{
  background:
    rgba(46,210,127,.09) !important;

  border:
    1px solid rgba(46,210,127,.15) !important;

  color:
    #79eaaa !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-refresh{
  background:
    rgba(255,255,255,.055) !important;

  border:
    1px solid var(--os-line) !important;

  color:
    #dce5eb !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-refresh:hover{
  background:
    rgba(255,255,255,.09) !important;
}


/* ==========================================================
   SUMMARY COUNTERS
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-summary{
  gap:
    8px !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-summary-card{
  background:
    linear-gradient(
      145deg,
      rgba(20,44,59,.96),
      rgba(15,34,47,.96)
    ) !important;

  color:
    var(--os-text) !important;

  border:
    1px solid var(--os-line) !important;

  border-radius:
    12px !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.13) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-summary-card span{
  color:
    var(--os-muted) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-summary-card strong{
  color:
    #fff !important;
}


/* ==========================================================
   KANBAN BOARD
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-board{
  gap:
    8px !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column{
  background:
    rgba(9,24,34,.80) !important;

  border:
    1px solid var(--os-line) !important;

  border-radius:
    13px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025) !important;

  overflow:hidden !important;
}


/* column headings */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column-head{
  border-bottom:
    1px solid var(--os-line) !important;

  color:
    #fff !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column-head strong{
  color:
    #fff !important;
}


/* NEW */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column[data-status="new"]
.sv-live-column-head{
  background:
    linear-gradient(
      90deg,
      rgba(255,81,93,.22),
      rgba(255,81,93,.07)
    ) !important;
}


/* PREPARING */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column[data-status="preparing"]
.sv-live-column-head{
  background:
    linear-gradient(
      90deg,
      rgba(255,173,50,.22),
      rgba(255,173,50,.07)
    ) !important;
}


/* READY */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column[data-status="ready"]
.sv-live-column-head{
  background:
    linear-gradient(
      90deg,
      rgba(46,210,127,.20),
      rgba(46,210,127,.06)
    ) !important;
}


/* ON THE WAY */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column[data-status="on_the_way"]
.sv-live-column-head{
  background:
    linear-gradient(
      90deg,
      rgba(63,145,255,.22),
      rgba(63,145,255,.06)
    ) !important;
}


/* COMPLETED */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column[data-status="completed"]
.sv-live-column-head{
  background:
    linear-gradient(
      90deg,
      rgba(148,163,184,.14),
      rgba(148,163,184,.035)
    ) !important;
}


/* ==========================================================
   ORDER CARDS
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-card{
  background:
    linear-gradient(
      145deg,
      #142a39,
      #102431
    ) !important;

  color:
    var(--os-text) !important;

  border:
    1px solid rgba(255,255,255,.085) !important;

  border-radius:
    11px !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.20) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-card:hover{
  background:
    linear-gradient(
      145deg,
      #173142,
      #122937
    ) !important;

  border-color:
    rgba(16,212,197,.17) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-card strong{
  color:#fff !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-card .muted{
  color:
    var(--os-muted) !important;
}


/* first / new order visual priority */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column[data-status="new"]
.sv-live-card:first-child{
  border-color:
    rgba(255,81,93,.30) !important;

  box-shadow:
    0 10px 28px rgba(255,81,93,.08),
    0 8px 22px rgba(0,0,0,.22) !important;
}


/* ==========================================================
   ORDER BUTTONS
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp button{
  font-family:
    inherit !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-accept{
  background:
    linear-gradient(
      135deg,
      #12c6b7,
      #08a99e
    ) !important;

  color:
    #031513 !important;

  font-weight:
    900 !important;

  box-shadow:
    0 7px 18px rgba(16,212,197,.16) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-reject{
  background:
    rgba(255,81,93,.10) !important;

  color:
    #ff969d !important;

  border:
    1px solid rgba(255,81,93,.15) !important;
}


/* ==========================================================
   PREPARATION BUTTONS
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-prep button{
  background:
    rgba(255,255,255,.045) !important;

  color:
    #cdd7df !important;

  border:
    1px solid var(--os-line) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-prep button.active{
  background:
    rgba(16,212,197,.14) !important;

  color:
    var(--os-turquoise) !important;

  border-color:
    rgba(16,212,197,.22) !important;
}


/* ==========================================================
   QUICK ACTION BAR
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-quickbar{
  background:
    linear-gradient(
      145deg,
      rgba(15,34,47,.98),
      rgba(11,27,38,.98)
    ) !important;

  border:
    1px solid var(--os-line) !important;

  border-radius:
    13px !important;

  box-shadow:
    0 12px 32px rgba(0,0,0,.20) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-quickbar button{
  background:
    rgba(255,255,255,.045) !important;

  color:
    #d8e2e8 !important;

  border:
    1px solid var(--os-line) !important;

  border-radius:
    10px !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-quickbar button:hover{
  background:
    rgba(16,212,197,.08) !important;

  color:
    #fff !important;

  border-color:
    rgba(16,212,197,.18) !important;
}


/* ==========================================================
   FORMS / INPUTS THROUGH ADMIN
========================================================== */

body.sv-premium-admin-ready
.main input,

body.sv-premium-admin-ready
.main select,

body.sv-premium-admin-ready
.main textarea{
  background:
    rgba(5,17,25,.55) !important;

  color:
    var(--os-text) !important;

  border:
    1px solid var(--os-line-strong) !important;

  border-radius:
    10px !important;
}


body.sv-premium-admin-ready
.main input:focus,

body.sv-premium-admin-ready
.main select:focus,

body.sv-premium-admin-ready
.main textarea:focus{
  border-color:
    rgba(16,212,197,.45) !important;

  box-shadow:
    0 0 0 3px rgba(16,212,197,.08) !important;
}


/* ==========================================================
   TABLE / ROW SURFACES
========================================================== */

body.sv-premium-admin-ready
.category-row,

body.sv-premium-admin-ready
.product-row,

body.sv-premium-admin-ready
.order-row{
  border-color:
    var(--os-line) !important;

  color:
    var(--os-text-2) !important;
}


/* ==========================================================
   PRIMARY BUTTONS
========================================================== */

body.sv-premium-admin-ready
.primary-small{
  background:
    linear-gradient(
      135deg,
      #10d4c5,
      #00aa9e
    ) !important;

  color:
    #031715 !important;

  border:
    0 !important;

  font-weight:
    900 !important;

  box-shadow:
    0 7px 18px rgba(16,212,197,.14) !important;
}


/* ==========================================================
   MOBILE HEADER
========================================================== */

body.sv-premium-admin-ready
.sv-admin-mobile-head{
  background:
    rgba(7,19,28,.97) !important;

  border-bottom:
    1px solid var(--os-line) !important;

  color:
    #fff !important;

  backdrop-filter:
    blur(18px);
}


body.sv-premium-admin-ready
.sv-mobile-brand strong{
  color:#fff !important;
}


body.sv-premium-admin-ready
.sv-mobile-brand span{
  color:
    var(--os-muted) !important;
}


body.sv-premium-admin-ready
.sv-mobile-live{
  color:
    #72e7a5 !important;
}


/* ==========================================================
   SCROLLBARS
========================================================== */

body.sv-premium-admin-ready *{
  scrollbar-width:
    thin;

  scrollbar-color:
    #284252 #0a1720;
}


body.sv-premium-admin-ready
*::-webkit-scrollbar{
  width:8px;
  height:8px;
}


body.sv-premium-admin-ready
*::-webkit-scrollbar-track{
  background:#091720;
}


body.sv-premium-admin-ready
*::-webkit-scrollbar-thumb{
  background:#294554;

  border-radius:999px;
}


body.sv-premium-admin-ready
*::-webkit-scrollbar-thumb:hover{
  background:#356073;
}


/* ==========================================================
   DESKTOP >= 1201px
========================================================== */

@media (min-width:1201px){

  body.sv-premium-admin-ready
  .sidebar{
    flex:
      0 0 240px !important;

    width:
      240px !important;

    min-width:
      240px !important;
  }


  body.sv-premium-admin-ready
  .main{
    width:
      calc(100% - 240px) !important;

    margin-left:
      0 !important;

    max-width:
      none !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp{
    padding:
      0 0 86px !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp
  .sv-live-board{
    grid-template-columns:
      repeat(5,minmax(0,1fr)) !important;
  }

}


/* ==========================================================
   TABLET 761px — 1200px
========================================================== */

@media
(min-width:761px)
and
(max-width:1200px){

  body.sv-premium-admin-ready
  .sidebar{
    flex:
      0 0 205px !important;

    width:
      205px !important;

    min-width:
      205px !important;

    padding:
      18px 11px !important;
  }


  body.sv-premium-admin-ready
  .main{
    width:
      calc(100% - 205px) !important;

    margin-left:
      0 !important;

    padding:
      13px !important;
  }


  body.sv-premium-admin-ready
  .side-brand{
    font-size:
      21px !important;
  }


  body.sv-premium-admin-ready
  .sv-admin-shell-top{
    min-height:
      76px !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp
  .sv-live-board{
    grid-template-columns:
      repeat(5,minmax(225px,1fr)) !important;

    overflow-x:
      auto !important;
  }

}


/* ==========================================================
   MOBILE <= 760px
========================================================== */

@media (max-width:760px){

  body.sv-premium-admin-ready
  .app{
    display:block !important;
  }


  body.sv-premium-admin-ready
  .main{
    width:
      100% !important;

    margin:
      0 !important;

    padding:
      10px !important;

    padding-top:
      72px !important;
  }


  body.sv-premium-admin-ready
  .sv-admin-shell-top{
    min-height:
      auto !important;

    padding:
      13px !important;

    border-radius:
      13px !important;

    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap:
      12px !important;
  }


  body.sv-premium-admin-ready
  .sv-admin-actions{
    width:
      100% !important;

    display:grid !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:
      7px !important;
  }


  body.sv-premium-admin-ready
  .sv-admin-clock{
    display:none !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp{
    padding:
      0 0 82px !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp
  .sv-live-summary{
    display:flex !important;

    overflow-x:
      auto !important;

    gap:
      7px !important;

    padding-bottom:
      4px !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp
  .sv-live-summary-card{
    flex:
      0 0 118px !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp
  .sv-live-board{
    grid-template-columns:
      repeat(5,86vw) !important;

    overflow-x:
      auto !important;

    scroll-snap-type:
      x proximity;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp
  .sv-live-column{
    scroll-snap-align:
      start;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp
  .sv-live-quickbar{
    overflow-x:
      auto !important;
  }

}


/* SERVELIO RESTAURANT OS PREMIUM DARK V1 END */


/* SERVELIO RESTAURANT OS PREMIUM DARK V2 START */

/* ==========================================================
   SERVELIO RESTAURANT OS
   PREMIUM DARK V2 — VISUAL UNIFICATION

   CSS VISUAL LAYER ONLY

   GOALS:
   1. Fix duplicated sidebar branding
   2. Fix top-right controls / language collision
   3. Remove remaining white application surfaces
   4. Unify Products / Categories / Settings
   5. Finish dark Live Orders Kanban
   6. Preserve all existing functionality
========================================================== */


/* ==========================================================
   01 — GLOBAL DARK CONTRACT
========================================================== */

body.sv-premium-admin-ready{
  --v2-bg:#07131c;
  --v2-bg-deep:#051019;
  --v2-panel:#0d202c;
  --v2-panel-2:#102633;
  --v2-panel-3:#142c3a;
  --v2-card:#132936;
  --v2-card-hover:#17313f;

  --v2-line:rgba(151,183,199,.12);
  --v2-line-strong:rgba(151,183,199,.20);

  --v2-text:#f4f8fa;
  --v2-text-soft:#d6e0e6;
  --v2-muted:#8497a5;

  --v2-brand:#10d4c5;
  --v2-brand-dark:#00aa9e;

  --v2-green:#2ed27f;
  --v2-red:#ff5964;
  --v2-orange:#ffad32;
  --v2-blue:#4a9bff;

  background:
    radial-gradient(
      circle at 82% 0%,
      rgba(16,212,197,.07),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #07131c,
      #06111a
    ) !important;
}


/* ==========================================================
   02 — SIDEBAR BRAND FIX
   Remove V1 artificial duplicate S mark.
   Keep the application's real Servelio brand.
========================================================== */

body.sv-premium-admin-ready .side-brand::before,
body.sv-premium-admin-ready .side-brand::after{
  content:none !important;
  display:none !important;
}


body.sv-premium-admin-ready .side-brand{
  min-height:auto !important;

  margin:
    0 5px 17px !important;

  padding:
    3px 3px 17px !important;

  border-bottom:
    1px solid var(--v2-line) !important;

  overflow:visible !important;
}


body.sv-premium-admin-ready .side-brand,
body.sv-premium-admin-ready .side-brand *{
  box-sizing:border-box !important;
}


/*
   Existing logo / brand children:
   stop oversized/absolute visual collisions.
*/

body.sv-premium-admin-ready .side-brand img{
  max-width:100% !important;
  max-height:52px !important;
  object-fit:contain !important;
}


body.sv-premium-admin-ready .side-brand > div,
body.sv-premium-admin-ready .side-brand > span,
body.sv-premium-admin-ready .side-brand > strong{
  position:relative !important;
  z-index:2 !important;
}


/* ==========================================================
   03 — RESTAURANT IDENTITY CARD
========================================================== */

body.sv-premium-admin-ready
.sv-admin-restaurant-card,
body.sv-premium-admin-ready
.sidebar .restaurant-card,
body.sv-premium-admin-ready
.sidebar [class*="restaurant-card"]{
  background:
    linear-gradient(
      145deg,
      rgba(19,42,55,.92),
      rgba(12,29,40,.92)
    ) !important;

  border:
    1px solid var(--v2-line) !important;

  color:
    var(--v2-text) !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.15) !important;
}


/* ==========================================================
   04 — TOP HEADER / OPERATION BAR
========================================================== */

body.sv-premium-admin-ready
.sv-admin-shell-top{
  position:relative !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1fr) auto !important;

  align-items:center !important;

  gap:18px !important;

  min-height:96px !important;

  padding:
    16px 18px !important;

  overflow:visible !important;
}


body.sv-premium-admin-ready
.sv-admin-context{
  min-width:0 !important;
}


body.sv-premium-admin-ready
.sv-admin-context-title{
  min-width:0 !important;

  flex-wrap:wrap !important;
}


body.sv-premium-admin-ready
.sv-admin-context-title h1{
  margin:0 !important;

  color:#fff !important;

  font-size:
    clamp(24px,2.1vw,31px) !important;

  line-height:1.05 !important;
}


body.sv-premium-admin-ready
.sv-admin-actions{
  position:relative !important;

  display:flex !important;

  justify-content:flex-end !important;
  align-items:center !important;

  gap:8px !important;

  min-width:0 !important;

  padding:0 !important;

  margin:0 !important;
}


/* ==========================================================
   05 — LANGUAGE SELECTOR COLLISION FIX
========================================================== */

body.sv-premium-admin-ready
#panelLanguage,

body.sv-premium-admin-ready
#panelLocale,

body.sv-premium-admin-ready
.sv-panel-language,

body.sv-premium-admin-ready
.sv-language-select,

body.sv-premium-admin-ready
.sv-admin-actions select{
  position:static !important;

  inset:auto !important;

  transform:none !important;

  float:none !important;

  width:auto !important;
  min-width:125px !important;
  max-width:155px !important;

  height:42px !important;

  margin:0 !important;

  padding:
    0 34px 0 12px !important;

  background:
    #102532 !important;

  color:
    #f4f8fa !important;

  border:
    1px solid var(--v2-line-strong) !important;

  border-radius:
    10px !important;

  box-shadow:none !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;
}


/*
   Some older language selector wrappers were absolutely
   positioned. Bring them back into the header flow.
*/

body.sv-premium-admin-ready
.sv-admin-actions [class*="language"],

body.sv-premium-admin-ready
.sv-admin-actions [class*="locale"]{
  position:relative !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  transform:none !important;

  margin:0 !important;
}


/* ==========================================================
   06 — GLOBAL CONTENT PANEL
========================================================== */

body.sv-premium-admin-ready
.main > .panel,

body.sv-premium-admin-ready
.main > section.panel{
  background:
    linear-gradient(
      145deg,
      rgba(13,32,44,.98),
      rgba(9,25,35,.98)
    ) !important;

  border:
    1px solid var(--v2-line) !important;

  color:
    var(--v2-text) !important;

  box-shadow:
    0 16px 45px rgba(0,0,0,.16) !important;
}


/* ==========================================================
   07 — REMOVE WHITE NESTED CARDS
========================================================== */

body.sv-premium-admin-ready
.main .card,

body.sv-premium-admin-ready
.main .box,

body.sv-premium-admin-ready
.main .section-card,

body.sv-premium-admin-ready
.main .settings-card,

body.sv-premium-admin-ready
.main .form-card,

body.sv-premium-admin-ready
.main .catalog-card,

body.sv-premium-admin-ready
.main .product-card,

body.sv-premium-admin-ready
.main .category-card,

body.sv-premium-admin-ready
.main .branding-card,

body.sv-premium-admin-ready
.main [class*="settings-section"],

body.sv-premium-admin-ready
.main [class*="setting-card"]{
  background:
    linear-gradient(
      145deg,
      var(--v2-panel-2),
      var(--v2-panel)
    ) !important;

  color:
    var(--v2-text) !important;

  border-color:
    var(--v2-line) !important;

  box-shadow:
    0 8px 26px rgba(0,0,0,.12) !important;
}


/* ==========================================================
   08 — TEXT CONTRACT
========================================================== */

body.sv-premium-admin-ready
.main h1,

body.sv-premium-admin-ready
.main h2,

body.sv-premium-admin-ready
.main h3,

body.sv-premium-admin-ready
.main h4,

body.sv-premium-admin-ready
.main h5,

body.sv-premium-admin-ready
.main label,

body.sv-premium-admin-ready
.main strong{
  color:
    var(--v2-text) !important;
}


body.sv-premium-admin-ready
.main p,

body.sv-premium-admin-ready
.main small,

body.sv-premium-admin-ready
.main .muted,

body.sv-premium-admin-ready
.main [class*="subtitle"],

body.sv-premium-admin-ready
.main [class*="description"]{
  color:
    var(--v2-muted) !important;
}


/* ==========================================================
   09 — FORM FIELDS
========================================================== */

body.sv-premium-admin-ready
.main input:not([type="checkbox"]):not([type="radio"]),

body.sv-premium-admin-ready
.main select,

body.sv-premium-admin-ready
.main textarea{
  background:
    #0a1b25 !important;

  color:
    #eef5f8 !important;

  border:
    1px solid var(--v2-line-strong) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}


body.sv-premium-admin-ready
.main input::placeholder,

body.sv-premium-admin-ready
.main textarea::placeholder{
  color:
    #667c8b !important;
}


body.sv-premium-admin-ready
.main select option{
  background:
    #0d202c !important;

  color:
    #f4f8fa !important;
}


/* ==========================================================
   10 — PRODUCTS
========================================================== */

body.sv-premium-admin-ready
#productsView{
  background:
    linear-gradient(
      145deg,
      rgba(13,32,44,.98),
      rgba(9,25,35,.98)
    ) !important;
}


body.sv-premium-admin-ready
#productsView > div,

body.sv-premium-admin-ready
#productsView .products-toolbar,

body.sv-premium-admin-ready
#productsView .product-toolbar,

body.sv-premium-admin-ready
#productsView [class*="catalog"]{
  border-color:
    var(--v2-line) !important;
}


body.sv-premium-admin-ready
#productsView .product-row{
  background:
    transparent !important;

  border-bottom:
    1px solid var(--v2-line) !important;

  color:
    var(--v2-text-soft) !important;
}


body.sv-premium-admin-ready
#productsView .product-row:hover{
  background:
    rgba(255,255,255,.025) !important;
}


/*
   The large Product Catalog box seen in V1.
*/

body.sv-premium-admin-ready
#productsView .panel,

body.sv-premium-admin-ready
#productsView .card,

body.sv-premium-admin-ready
#productsView [class*="catalog-card"]{
  background:
    #102532 !important;

  border:
    1px solid var(--v2-line) !important;

  color:
    var(--v2-text) !important;
}


/* Product image */

body.sv-premium-admin-ready
#productsView img{
  border-radius:
    10px !important;

  background:
    #0a1923 !important;

  border:
    1px solid var(--v2-line) !important;
}


/* ==========================================================
   11 — CATEGORY VIEW
========================================================== */

body.sv-premium-admin-ready
#categoriesView{
  background:
    linear-gradient(
      145deg,
      rgba(13,32,44,.98),
      rgba(9,25,35,.98)
    ) !important;
}


body.sv-premium-admin-ready
#categoriesView .category-row{
  background:
    transparent !important;

  border-bottom:
    1px solid var(--v2-line) !important;

  color:
    var(--v2-text-soft) !important;

  min-height:
    66px !important;
}


body.sv-premium-admin-ready
#categoriesView .category-row:hover{
  background:
    rgba(255,255,255,.025) !important;
}


/* ==========================================================
   12 — SETTINGS
========================================================== */

body.sv-premium-admin-ready
#settingsView{
  background:
    transparent !important;
}


body.sv-premium-admin-ready
#settingsView > div,

body.sv-premium-admin-ready
#settingsView > section,

body.sv-premium-admin-ready
#settingsView .settings-section,

body.sv-premium-admin-ready
#settingsView .settings-card,

body.sv-premium-admin-ready
#settingsView [class*="branding"]{
  background:
    linear-gradient(
      145deg,
      #102633,
      #0c202b
    ) !important;

  border-color:
    var(--v2-line) !important;

  color:
    var(--v2-text) !important;
}


/*
   Upload / drop zones should stay readable but not white.
*/

body.sv-premium-admin-ready
#settingsView [class*="upload"],

body.sv-premium-admin-ready
#settingsView [class*="drop"]{
  background:
    #0a1c27 !important;

  border-color:
    rgba(16,212,197,.17) !important;

  color:
    var(--v2-text-soft) !important;
}


/* ==========================================================
   13 — BUTTON SYSTEM
========================================================== */

body.sv-premium-admin-ready
.main button{
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease !important;
}


body.sv-premium-admin-ready
.main button:hover{
  transform:
    translateY(-1px);
}


body.sv-premium-admin-ready
.main .primary,

body.sv-premium-admin-ready
.main .primary-small{
  background:
    linear-gradient(
      135deg,
      #13d4c5,
      #05b2a6
    ) !important;

  color:
    #031614 !important;

  border:
    1px solid rgba(255,255,255,.04) !important;

  box-shadow:
    0 8px 20px rgba(16,212,197,.14) !important;
}


/* ==========================================================
   14 — LIVE ORDERS:
   COUNTERS SHOULD NO LONGER BE WHITE
========================================================== */

body.sv-premium-admin-ready
#ordersView.sv-live-orders-v1{
  background:
    transparent !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp{
  color:
    var(--v2-text) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-summary-card{
  background:
    linear-gradient(
      145deg,
      #112936,
      #0d222e
    ) !important;

  border:
    1px solid var(--v2-line) !important;

  color:
    #fff !important;

  box-shadow:
    0 10px 26px rgba(0,0,0,.14) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-summary-card span{
  color:
    #8499a7 !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-summary-card strong{
  color:
    #fff !important;
}


/* ==========================================================
   15 — LIVE ORDER COLUMNS
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-column{
  background:
    linear-gradient(
      180deg,
      rgba(11,29,40,.98),
      rgba(8,23,32,.98)
    ) !important;

  border:
    1px solid var(--v2-line) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 8px 26px rgba(0,0,0,.12) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-column-head{
  background:
    rgba(255,255,255,.018) !important;

  border-bottom:
    1px solid var(--v2-line) !important;
}


/* ==========================================================
   16 — LIVE ORDER CARDS
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card{
  background:
    linear-gradient(
      145deg,
      #15303f,
      #102633
    ) !important;

  color:
    #edf4f7 !important;

  border:
    1px solid rgba(154,190,205,.12) !important;

  box-shadow:
    0 9px 24px rgba(0,0,0,.19) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card:hover{
  background:
    linear-gradient(
      145deg,
      #183746,
      #132c39
    ) !important;

  border-color:
    rgba(16,212,197,.23) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card *{
  border-color:
    var(--v2-line) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card strong{
  color:
    #fff !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card .muted{
  color:
    #8295a2 !important;
}


/*
   Generic inner order surfaces.
*/

body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card > div{
  background-color:
    transparent;
}


/* ==========================================================
   17 — LIVE ORDERS DETAIL BUTTON
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card button{
  border-radius:
    9px !important;

  font-weight:
    850 !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card button:not(.sv-live-accept):not(.sv-live-reject){
  background:
    #0b1c27 !important;

  color:
    #dce7ec !important;

  border:
    1px solid var(--v2-line) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card button:not(.sv-live-accept):not(.sv-live-reject):hover{
  background:
    #122a37 !important;

  border-color:
    rgba(16,212,197,.22) !important;
}


/* ==========================================================
   18 — STATUS BADGES
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card [class*="badge"],

body.sv-premium-admin-ready
#svLiveOrdersApp .sv-live-card [class*="type"]{
  box-shadow:none !important;
}


/* ==========================================================
   19 — AI PAGE OLD WHITE SURFACES
========================================================== */

body.sv-premium-admin-ready
#aiView,

body.sv-premium-admin-ready
#aiView .card,

body.sv-premium-admin-ready
#aiView .box,

body.sv-premium-admin-ready
#aiView section{
  border-color:
    var(--v2-line) !important;
}


/* ==========================================================
   20 — SCROLL / LAYOUT CONSISTENCY
========================================================== */

body.sv-premium-admin-ready
.main{
  overflow-x:
    hidden !important;
}


body.sv-premium-admin-ready
.main > .panel{
  max-width:
    100% !important;

  box-sizing:
    border-box !important;
}


/* ==========================================================
   21 — DESKTOP
========================================================== */

@media (min-width:1201px){

  body.sv-premium-admin-ready
  .sv-admin-shell-top{
    grid-template-columns:
      minmax(420px,1fr) auto !important;
  }


  body.sv-premium-admin-ready
  .sv-admin-actions{
    max-width:
      620px !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp .sv-live-board{
    gap:
      9px !important;

    grid-template-columns:
      repeat(5,minmax(0,1fr)) !important;
  }

}


/* ==========================================================
   22 — TABLET
========================================================== */

@media
(min-width:761px)
and
(max-width:1200px){

  body.sv-premium-admin-ready
  .sv-admin-shell-top{
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:
      12px !important;
  }


  body.sv-premium-admin-ready
  .sv-admin-actions{
    justify-content:
      flex-start !important;

    flex-wrap:
      wrap !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp .sv-live-board{
    grid-template-columns:
      repeat(5,minmax(235px,1fr)) !important;

    overflow-x:
      auto !important;
  }

}


/* ==========================================================
   23 — MOBILE
========================================================== */

@media (max-width:760px){

  body.sv-premium-admin-ready
  .sv-admin-shell-top{
    display:block !important;

    min-height:
      auto !important;

    padding:
      14px !important;
  }


  body.sv-premium-admin-ready
  .sv-admin-actions{
    margin-top:
      13px !important;

    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:
      7px !important;
  }


  body.sv-premium-admin-ready
  .sv-admin-actions select{
    width:
      100% !important;

    max-width:
      none !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp .sv-live-summary-card{
    flex:
      0 0 126px !important;
  }


  body.sv-premium-admin-ready
  #svLiveOrdersApp .sv-live-board{
    grid-template-columns:
      repeat(5,88vw) !important;

    gap:
      10px !important;
  }


  body.sv-premium-admin-ready
  #productsView .product-row{
    padding:
      13px 8px !important;
  }


  body.sv-premium-admin-ready
  #categoriesView .category-row{
    min-height:
      58px !important;
  }

}


/* SERVELIO RESTAURANT OS PREMIUM DARK V2 END */


/* SERVELIO RESTAURANT OS PREMIUM DARK V3 START */

/* ==========================================================
   SERVELIO RESTAURANT OS
   PREMIUM DARK V3 — FULL COMPONENT PASS

   REAL EXISTING COMPONENT CONTRACTS:
   - .sv-summary-card
   - .sv-live-board
   - .sv-live-column
   - .sv-order-card
   - #reservationsView
   - .sv-premium-language-card
   - .sv-language-options
   - .sv-language-choice
   - .sv-language-foot
   - .settings-save-bar

   VISUAL LAYER ONLY.
========================================================== */


/* ==========================================================
   COMMON TOKENS
========================================================== */

body.sv-premium-admin-ready{
  --v3-surface:#0d202c;
  --v3-surface-2:#102633;
  --v3-surface-3:#142d3a;
  --v3-surface-4:#173441;

  --v3-border:rgba(148,183,199,.13);
  --v3-border-strong:rgba(148,183,199,.21);

  --v3-text:#f4f8fa;
  --v3-soft:#d6e2e8;
  --v3-muted:#8499a7;

  --v3-brand:#10d4c5;
  --v3-brand-soft:rgba(16,212,197,.12);

  --v3-green:#2ed27f;
  --v3-red:#ff5964;
  --v3-orange:#ffad32;
  --v3-blue:#4a9bff;
}


/* ==========================================================
   1. LIVE ORDERS — REAL SUMMARY CARD CLASS
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-summary-card{
  background:
    linear-gradient(
      145deg,
      #132d3a,
      #0e222e
    ) !important;

  border:
    1px solid var(--v3-border) !important;

  color:
    var(--v3-text) !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.18) !important;

  border-radius:
    14px !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-summary-card span{
  color:
    var(--v3-muted) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-summary-card strong{
  color:
    #fff !important;

  opacity:
    1 !important;
}


/* ==========================================================
   2. LIVE ORDERS BOARD
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-board{
  background:
    transparent !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column{
  background:
    linear-gradient(
      180deg,
      #0b202b 0%,
      #081923 100%
    ) !important;

  border:
    1px solid var(--v3-border) !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.13) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column-head{
  background:
    rgba(255,255,255,.018) !important;

  color:
    #f6fafc !important;

  border-bottom:
    1px solid var(--v3-border) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column-head strong{
  color:#fff !important;
}


/* ==========================================================
   3. LIVE ORDERS — REAL ORDER CARD COVERAGE
   Cover both historical and current card contracts.
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-order-card,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-order-card,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column-body > article,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-column-body > .order-card{
  background:
    linear-gradient(
      145deg,
      #173441,
      #112936
    ) !important;

  color:
    var(--v3-text) !important;

  border:
    1px solid rgba(150,187,202,.14) !important;

  box-shadow:
    0 9px 24px rgba(0,0,0,.20) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-order-card:hover,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-order-card:hover{
  background:
    linear-gradient(
      145deg,
      #1a3a48,
      #14303d
    ) !important;

  border-color:
    rgba(16,212,197,.24) !important;
}


/*
   Order cards contain old light child surfaces.
   Only direct order-card children are normalized.
*/

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-order-card > div,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-order-card > div{
  background-color:
    transparent !important;

  border-color:
    var(--v3-border) !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-order-card strong,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-order-card strong{
  color:#fff !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-order-card small,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-order-card small,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-order-card .muted,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-order-card .muted{
  color:
    var(--v3-muted) !important;
}


/* ==========================================================
   4. LIVE ORDER BUTTONS
========================================================== */

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-order-card button,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-order-card button{
  background:
    #0a1d28 !important;

  color:
    #e6eff3 !important;

  border:
    1px solid var(--v3-border) !important;

  box-shadow:
    none !important;
}


body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-order-card button:hover,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-order-card button:hover{
  background:
    #12303d !important;

  border-color:
    rgba(16,212,197,.23) !important;
}


/*
   Keep positive workflow buttons visually dominant.
*/

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-order-card .primary,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-order-card .sv-live-accept,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-order-card .primary,

body.sv-premium-admin-ready
#svLiveOrdersApp
.sv-live-order-card .sv-live-accept{
  background:
    linear-gradient(
      135deg,
      #20c97b,
      #18ad68
    ) !important;

  color:#fff !important;

  border-color:
    transparent !important;
}


/* ==========================================================
   5. RESERVATIONS VIEW
========================================================== */

body.sv-premium-admin-ready
#reservationsView{
  background:
    transparent !important;

  color:
    var(--v3-text) !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


/*
   Reservation module has multiple direct sections.
   Normalize them without changing DOM/functionality.
*/

body.sv-premium-admin-ready
#reservationsView > div,

body.sv-premium-admin-ready
#reservationsView > section{
  border-color:
    var(--v3-border) !important;
}


/* ==========================================================
   6. RESERVATION STAT CARDS
========================================================== */

body.sv-premium-admin-ready
#reservationsView
.stats,

body.sv-premium-admin-ready
#reservationsView
[class*="stats"]{
  background:
    transparent !important;
}


body.sv-premium-admin-ready
#reservationsView
.stat,

body.sv-premium-admin-ready
#reservationsView
[class*="stat-card"]{
  background:
    linear-gradient(
      145deg,
      #132c39,
      #0e222e
    ) !important;

  border:
    1px solid var(--v3-border) !important;

  color:
    var(--v3-text) !important;

  box-shadow:
    0 9px 25px rgba(0,0,0,.15) !important;
}


body.sv-premium-admin-ready
#reservationsView
.stat span,

body.sv-premium-admin-ready
#reservationsView
[class*="stat-card"] span{
  color:
    var(--v3-muted) !important;
}


body.sv-premium-admin-ready
#reservationsView
.stat strong,

body.sv-premium-admin-ready
#reservationsView
[class*="stat-card"] strong{
  color:#fff !important;
}


/* ==========================================================
   7. RESERVATION FILTER BAR
========================================================== */

body.sv-premium-admin-ready
#reservationsView
input,

body.sv-premium-admin-ready
#reservationsView
select{
  background:
    #0a1d28 !important;

  color:
    #edf5f8 !important;

  border:
    1px solid var(--v3-border-strong) !important;
}


body.sv-premium-admin-ready
#reservationsView
input::placeholder{
  color:
    #708795 !important;
}


body.sv-premium-admin-ready
#reservationsView
button{
  border-color:
    var(--v3-border) !important;
}


/* ==========================================================
   8. RESERVATION LIST CARDS
========================================================== */

body.sv-premium-admin-ready
#reservationsView
[class*="reservation-card"],

body.sv-premium-admin-ready
#reservationsView
[class*="reservation-item"],

body.sv-premium-admin-ready
#reservationsView
[class*="reservation-row"]{
  background:
    linear-gradient(
      145deg,
      #122b38,
      #0d222d
    ) !important;

  color:
    var(--v3-text) !important;

  border:
    1px solid var(--v3-border) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.13) !important;
}


body.sv-premium-admin-ready
#reservationsView
[class*="reservation-card"] strong,

body.sv-premium-admin-ready
#reservationsView
[class*="reservation-item"] strong,

body.sv-premium-admin-ready
#reservationsView
[class*="reservation-row"] strong{
  color:#fff !important;
}


body.sv-premium-admin-ready
#reservationsView
[class*="reservation-card"] small,

body.sv-premium-admin-ready
#reservationsView
[class*="reservation-item"] small,

body.sv-premium-admin-ready
#reservationsView
[class*="reservation-row"] small{
  color:
    var(--v3-muted) !important;
}


/*
   Some reservation list entries are direct children of
   the generated list container rather than named cards.
*/

body.sv-premium-admin-ready
#reservationsView
[id*="reservationList"] > div,

body.sv-premium-admin-ready
#reservationsView
[id*="reservationsList"] > div{
  background:
    linear-gradient(
      145deg,
      #122b38,
      #0d222d
    ) !important;

  color:
    var(--v3-text) !important;

  border-color:
    var(--v3-border) !important;
}


/* ==========================================================
   9. SETTINGS — REAL PREMIUM LANGUAGE CARD
========================================================== */

body.sv-premium-admin-ready
#settingsView
.sv-premium-language-card{
  background:
    linear-gradient(
      145deg,
      #102a37,
      #0b202b
    ) !important;

  border:
    1px solid var(--v3-border) !important;

  box-shadow:
    0 14px 35px rgba(0,0,0,.16) !important;
}


/* ==========================================================
   10. SETTINGS LANGUAGE HEADER
========================================================== */

body.sv-premium-admin-ready
#settingsView
.sv-store-language-header{
  background:
    transparent !important;

  border-bottom:
    0 !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-store-language-header h3{
  color:
    #f4f8fa !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-store-language-header p{
  color:
    var(--v3-muted) !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-settings-eyebrow{
  color:
    var(--v3-brand) !important;
}


/* ==========================================================
   11. SETTINGS — REAL LANGUAGE CHOICES
========================================================== */

body.sv-premium-admin-ready
#settingsView
.sv-language-options{
  background:
    transparent !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-language-choice{
  background:
    #0b202b !important;

  color:
    var(--v3-text) !important;

  border:
    1px solid var(--v3-border) !important;

  box-shadow:
    none !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-language-choice:hover{
  background:
    #12303d !important;

  border-color:
    rgba(16,212,197,.30) !important;

  box-shadow:
    0 8px 20px rgba(0,0,0,.12) !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-language-choice.active{
  background:
    linear-gradient(
      145deg,
      rgba(16,212,197,.15),
      rgba(16,212,197,.06)
    ) !important;

  border-color:
    rgba(16,212,197,.48) !important;

  box-shadow:
    inset 0 0 0 1px rgba(16,212,197,.06) !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-language-choice-main{
  color:
    #f4f8fa !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-language-choice-sub{
  color:
    #7f94a2 !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-language-choice-check{
  background:
    #17303d !important;

  color:
    #7f95a2 !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-language-choice.active
.sv-language-choice-check{
  background:
    var(--v3-brand) !important;

  color:
    #041817 !important;
}


/* ==========================================================
   12. LANGUAGE FOOT
========================================================== */

body.sv-premium-admin-ready
#settingsView
.sv-language-foot{
  background:
    rgba(4,16,23,.35) !important;

  color:
    var(--v3-muted) !important;

  border-top:
    1px solid var(--v3-border) !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-language-live-dot{
  background:
    var(--v3-brand) !important;

  box-shadow:
    0 0 0 4px rgba(16,212,197,.09) !important;
}


/* ==========================================================
   13. PREMIUM LOGO CARD
========================================================== */

body.sv-premium-admin-ready
#settingsView
.sv-premium-logo-card{
  background:
    linear-gradient(
      145deg,
      #102a37,
      #0b202b
    ) !important;

  border:
    1px solid var(--v3-border) !important;

  box-shadow:
    0 14px 35px rgba(0,0,0,.16) !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-logo-premium-head h3{
  color:
    #f4f8fa !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-logo-premium-head p{
  color:
    var(--v3-muted) !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-logo-dropzone{
  background:
    #091d27 !important;

  border-color:
    rgba(16,212,197,.16) !important;
}


body.sv-premium-admin-ready
#settingsView
.sv-logo-preview-box{
  background:
    #0d2531 !important;

  border-color:
    var(--v3-border) !important;
}


/* ==========================================================
   14. SETTINGS — REAL SAVE BAR
========================================================== */

body.sv-premium-admin-ready
#settingsView
.settings-save-bar{
  background:
    linear-gradient(
      145deg,
      rgba(15,39,51,.98),
      rgba(10,29,39,.98)
    ) !important;

  border:
    1px solid var(--v3-border) !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.25) !important;

  color:
    var(--v3-text) !important;

  backdrop-filter:
    blur(14px);
}


body.sv-premium-admin-ready
#settingsView
.settings-save-bar strong{
  color:
    #f4f8fa !important;
}


body.sv-premium-admin-ready
#settingsView
.settings-save-bar small{
  color:
    var(--v3-muted) !important;
}


/* ==========================================================
   15. TOP PANEL LANGUAGE SELECTOR
   Keep it compact and part of operation bar.
========================================================== */

body.sv-premium-admin-ready
.sv-admin-shell-top select,

body.sv-premium-admin-ready
.sv-admin-actions select{
  min-width:
    118px !important;

  max-width:
    135px !important;

  height:
    42px !important;

  padding:
    0 32px 0 11px !important;

  background:
    #0c202b !important;

  color:
    #edf5f8 !important;

  border:
    1px solid var(--v3-border-strong) !important;

  border-radius:
    10px !important;

  box-shadow:
    none !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;
}


/* ==========================================================
   16. RESERVATION FALLBACK
   Existing module may generate generic .card elements.
   Scope strictly to reservationsView.
========================================================== */

body.sv-premium-admin-ready
#reservationsView
.card,

body.sv-premium-admin-ready
#reservationsView
.box{
  background:
    linear-gradient(
      145deg,
      #122b38,
      #0d222d
    ) !important;

  color:
    var(--v3-text) !important;

  border-color:
    var(--v3-border) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.13) !important;
}


/* ==========================================================
   17. TABLET
========================================================== */

@media
(min-width:761px)
and
(max-width:1200px){

  body.sv-premium-admin-ready
  #settingsView
  .sv-language-options{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  body.sv-premium-admin-ready
  #reservationsView
  [class*="stats"]{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


/* ==========================================================
   18. MOBILE
========================================================== */

@media(max-width:760px){

  body.sv-premium-admin-ready
  #settingsView
  .sv-language-options{
    grid-template-columns:
      1fr !important;

    padding:
      2px 14px 15px !important;
  }


  body.sv-premium-admin-ready
  #settingsView
  .sv-language-choice{
    min-height:
      62px !important;
  }


  body.sv-premium-admin-ready
  #settingsView
  .settings-save-bar{
    bottom:
      8px !important;

    border-radius:
      14px !important;
  }


  body.sv-premium-admin-ready
  #reservationsView
  [class*="stats"]{
    grid-template-columns:
      1fr 1fr !important;

    gap:
      8px !important;
  }


  body.sv-premium-admin-ready
  #reservationsView
  [class*="reservation-card"],

  body.sv-premium-admin-ready
  #reservationsView
  [class*="reservation-item"],

  body.sv-premium-admin-ready
  #reservationsView
  [class*="reservation-row"]{
    border-radius:
      13px !important;
  }

}


/* SERVELIO RESTAURANT OS PREMIUM DARK V3 END */

/* SERVELIO RESTAURANT OS PREMIUM DARK V4 FINAL START
   FINAL REMAINING LIGHT SURFACES
   Scope:
   - Dashboard / Restoran Özeti
   - Product Catalog
   - Reservations
   - AI / Shadow Mode
   CSS ONLY — no runtime/business logic changes
*/

:root{
  --sv-v4-bg:#06141d;
  --sv-v4-bg-2:#081b26;
  --sv-v4-surface:#0b202c;
  --sv-v4-surface-2:#0d2532;
  --sv-v4-surface-3:#102b39;
  --sv-v4-border:rgba(148,190,205,.14);
  --sv-v4-border-strong:rgba(148,190,205,.22);
  --sv-v4-text:#f5fbff;
  --sv-v4-muted:#8ea8b8;
  --sv-v4-muted-2:#6f8999;
  --sv-v4-accent:#12c7b5;
  --sv-v4-accent-soft:rgba(18,199,181,.12);
  --sv-v4-green:#32d296;
  --sv-v4-red:#ff6674;
  --sv-v4-shadow:0 18px 48px rgba(0,0,0,.20);
}

/* ==========================================================
   1. DASHBOARD / RESTORAN ÖZETİ
   ========================================================== */

#dashboardView{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--sv-v4-text) !important;
}

#dashboardView > *{
  border-color:var(--sv-v4-border) !important;
}

#dashboardView .dashboard-stat-card{
  background:
    linear-gradient(
      145deg,
      rgba(16,43,57,.98),
      rgba(8,27,38,.98)
    ) !important;
  border:1px solid var(--sv-v4-border) !important;
  color:var(--sv-v4-text) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.16) !important;
  border-radius:18px !important;
}

#dashboardView .dashboard-stat-card:hover{
  border-color:rgba(18,199,181,.34) !important;
  transform:translateY(-1px);
}

#dashboardView .dashboard-stat-card span,
#dashboardView .dashboard-stat-card small{
  color:var(--sv-v4-muted) !important;
}

#dashboardView .dashboard-stat-card strong{
  color:var(--sv-v4-text) !important;
}

#dashboardView .dashboard-stat-card.revenue{
  background:
    linear-gradient(
      145deg,
      rgba(11,47,52,.98),
      rgba(7,30,36,.98)
    ) !important;
}

#dashboardView .dashboard-stat-card.new{
  border-color:rgba(255,102,116,.20) !important;
}

#dashboardView .dashboard-stat-card.preparing{
  border-color:rgba(255,184,77,.20) !important;
}

#dashboardView .dashboard-stat-card.ready{
  border-color:rgba(50,210,150,.22) !important;
}

#dashboardView .dashboard-stat-card.delivery{
  border-color:rgba(75,155,255,.22) !important;
}

#dashboardView .dashboard-stat-card.completed{
  border-color:rgba(148,190,205,.18) !important;
}

/* Dashboard general cards / recent orders */
#dashboardView .dashboard-card,
#dashboardView .card,
#dashboardView .box{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.98),
      rgba(7,25,35,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border) !important;
  box-shadow:var(--sv-v4-shadow) !important;
}

#dashboardView .dashboard-card h1,
#dashboardView .dashboard-card h2,
#dashboardView .dashboard-card h3,
#dashboardView .card h1,
#dashboardView .card h2,
#dashboardView .card h3,
#dashboardView .box h1,
#dashboardView .box h2,
#dashboardView .box h3{
  color:var(--sv-v4-text) !important;
}

#dashboardRecentOrders{
  background:transparent !important;
  color:var(--sv-v4-text) !important;
}

#dashboardRecentOrders .dashboard-order-row{
  background:var(--sv-v4-surface-2) !important;
  border:1px solid var(--sv-v4-border) !important;
  color:var(--sv-v4-text) !important;
  border-radius:14px !important;
}

#dashboardRecentOrders .dashboard-order-row:hover{
  background:var(--sv-v4-surface-3) !important;
  border-color:rgba(18,199,181,.30) !important;
}

#dashboardRecentOrders strong{
  color:var(--sv-v4-text) !important;
}

#dashboardRecentOrders span,
#dashboardRecentOrders small{
  color:var(--sv-v4-muted) !important;
}

/* Any premium summary cards used by dashboard/runtime */
#dashboardView .sv-summary-card{
  background:
    linear-gradient(
      145deg,
      rgba(13,37,50,.98),
      rgba(8,27,38,.98)
    ) !important;
  border:1px solid var(--sv-v4-border) !important;
  color:var(--sv-v4-text) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.16) !important;
}

#dashboardView .sv-summary-card span{
  color:var(--sv-v4-muted) !important;
}

#dashboardView .sv-summary-card strong{
  color:var(--sv-v4-text) !important;
}


/* ==========================================================
   2. PRODUCTS / ÜRÜN KATALOĞU
   ========================================================== */

#productsView{
  background:transparent !important;
  color:var(--sv-v4-text) !important;
}

/*
  Product catalog toolbar / search card.
  We deliberately scope every override to productsView.
*/
#productsView > div,
#productsView .products-toolbar,
#productsView .product-toolbar,
#productsView [class*="catalog"]{
  border-color:var(--sv-v4-border) !important;
}

/* Catalog containers that were still white */
#productsView .panel,
#productsView .card,
#productsView [class*="catalog-card"]{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.98),
      rgba(8,27,38,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.17) !important;
}

/* Catalog text */
#productsView h1,
#productsView h2,
#productsView h3,
#productsView h4,
#productsView strong,
#productsView label{
  color:var(--sv-v4-text) !important;
}

#productsView p,
#productsView small{
  color:var(--sv-v4-muted) !important;
}

/* Search / selects */
#productsView input[type="text"],
#productsView input[type="search"],
#productsView select{
  background:#071a24 !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border-strong) !important;
  box-shadow:none !important;
}

#productsView input::placeholder{
  color:#688596 !important;
  opacity:1 !important;
}

#productsView select option{
  background:#071a24 !important;
  color:#f5fbff !important;
}

/* Category filter chips */
#productsView button:not(.danger):not([class*="delete"]){
  border-color:var(--sv-v4-border) !important;
}

#productsView .product-row{
  background:transparent !important;
  color:var(--sv-v4-text) !important;
  border-color:var(--sv-v4-border) !important;
}

#productsView .product-row:hover{
  background:rgba(18,199,181,.045) !important;
}

#productsView .product-row strong,
#productsView .product-row b{
  color:var(--sv-v4-text) !important;
}

#productsView .product-row small,
#productsView .product-row p{
  color:var(--sv-v4-muted) !important;
}


/* ==========================================================
   3. RESERVATIONS
   ========================================================== */

#reservationsView{
  background:transparent !important;
  color:var(--sv-v4-text) !important;
}

#reservationsView > div,
#reservationsView > section{
  border-color:var(--sv-v4-border) !important;
}

/* Stats and summary cards */
#reservationsView [class*="stat-card"],
#reservationsView [class*="summary-card"]{
  background:
    linear-gradient(
      145deg,
      rgba(13,37,50,.98),
      rgba(8,27,38,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.16) !important;
}

#reservationsView [class*="stat-card"] span,
#reservationsView [class*="summary-card"] span,
#reservationsView [class*="stat-card"] small,
#reservationsView [class*="summary-card"] small{
  color:var(--sv-v4-muted) !important;
}

#reservationsView [class*="stat-card"] strong,
#reservationsView [class*="summary-card"] strong{
  color:var(--sv-v4-text) !important;
}

/* Search / filters */
#reservationsView input,
#reservationsView select{
  background:#071a24 !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border-strong) !important;
}

#reservationsView input::placeholder{
  color:#688596 !important;
  opacity:1 !important;
}

#reservationsView select option{
  background:#071a24 !important;
  color:#f5fbff !important;
}

/* Reservation list rows */
#reservationsView [class*="reservation-card"],
#reservationsView [class*="reservation-item"],
#reservationsView [class*="reservation-row"]{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.98),
      rgba(8,27,38,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.14) !important;
}

#reservationsView [class*="reservation-card"]:hover,
#reservationsView [class*="reservation-item"]:hover,
#reservationsView [class*="reservation-row"]:hover{
  background:var(--sv-v4-surface-2) !important;
  border-color:rgba(18,199,181,.30) !important;
}

#reservationsView [class*="reservation-card"] strong,
#reservationsView [class*="reservation-item"] strong,
#reservationsView [class*="reservation-row"] strong{
  color:var(--sv-v4-text) !important;
}

#reservationsView [class*="reservation-card"] small,
#reservationsView [class*="reservation-item"] small,
#reservationsView [class*="reservation-row"] small{
  color:var(--sv-v4-muted) !important;
}


/* ==========================================================
   4. AI ZENTRALE / SHADOW MODE
   ========================================================== */

#aiView{
  background:transparent !important;
  color:var(--sv-v4-text) !important;
}

#aiView .card,
#aiView .box,
#aiView section{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.98),
      rgba(7,25,35,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border-color:var(--sv-v4-border) !important;
}

/* Header / status surfaces */
#aiView h1,
#aiView h2,
#aiView h3,
#aiView h4,
#aiView strong{
  color:var(--sv-v4-text) !important;
}

#aiView p,
#aiView small,
#aiView label{
  color:var(--sv-v4-muted) !important;
}

/* AI approval/action cards */
#aiView .ai-action-card{
  background:
    linear-gradient(
      145deg,
      rgba(13,37,50,.98),
      rgba(8,27,38,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.18) !important;
}

#aiView .ai-action-card:hover{
  border-color:rgba(18,199,181,.32) !important;
  background:
    linear-gradient(
      145deg,
      rgba(15,43,56,.98),
      rgba(9,31,42,.98)
    ) !important;
}

#aiView .ai-action-top,
#aiView .ai-action-footer,
#aiView .ai-action-customer,
#aiView .ai-action-details{
  color:var(--sv-v4-text) !important;
  border-color:var(--sv-v4-border) !important;
}

#aiView .ai-action-details > div{
  background:#071a24 !important;
  border:1px solid var(--sv-v4-border) !important;
  color:var(--sv-v4-text) !important;
}

#aiView .ai-action-details span,
#aiView .ai-action-customer span,
#aiView .ai-action-footer small{
  color:var(--sv-v4-muted) !important;
}

#aiView .ai-action-details strong,
#aiView .ai-action-customer strong,
#aiView .ai-action-top strong{
  color:var(--sv-v4-text) !important;
}

/* AI list empty/loading surfaces */
#aiView .ai-actions-list{
  color:var(--sv-v4-text) !important;
}


/* ==========================================================
   5. COMMON DARK FORM SURFACES — ONLY THESE FOUR VIEWS
   ========================================================== */

#dashboardView input,
#dashboardView select,
#dashboardView textarea,
#productsView textarea,
#reservationsView textarea,
#aiView input,
#aiView select,
#aiView textarea{
  background:#071a24 !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border-strong) !important;
}

#dashboardView input::placeholder,
#dashboardView textarea::placeholder,
#productsView textarea::placeholder,
#reservationsView textarea::placeholder,
#aiView input::placeholder,
#aiView textarea::placeholder{
  color:#688596 !important;
  opacity:1 !important;
}


/* ==========================================================
   6. RESPONSIVE
   Desktop >=1200
   Tablet 761-1200
   Mobile <=760
   ========================================================== */

@media (min-width:1201px){
  #dashboardView .dashboard-stat-card{
    min-height:108px;
  }

  #productsView .product-row{
    min-height:72px;
  }

  #reservationsView [class*="reservation-card"],
  #reservationsView [class*="reservation-item"],
  #reservationsView [class*="reservation-row"]{
    min-height:78px;
  }
}

@media (min-width:761px) and (max-width:1200px){
  #dashboardView .dashboard-stat-card{
    border-radius:16px !important;
  }

  #productsView input,
  #productsView select,
  #reservationsView input,
  #reservationsView select{
    min-height:46px;
  }

  #productsView button,
  #reservationsView button,
  #aiView button{
    min-height:44px;
  }

  #reservationsView [class*="reservation-card"],
  #reservationsView [class*="reservation-item"],
  #reservationsView [class*="reservation-row"]{
    border-radius:16px !important;
  }
}

@media (max-width:760px){
  #dashboardView .dashboard-stat-card,
  #dashboardView .dashboard-card,
  #dashboardView .card,
  #dashboardView .box,
  #productsView .panel,
  #productsView .card,
  #productsView [class*="catalog-card"],
  #reservationsView [class*="stat-card"],
  #reservationsView [class*="summary-card"],
  #reservationsView [class*="reservation-card"],
  #reservationsView [class*="reservation-item"],
  #reservationsView [class*="reservation-row"],
  #aiView .ai-action-card{
    border-radius:15px !important;
  }

  #productsView input,
  #productsView select,
  #reservationsView input,
  #reservationsView select,
  #aiView input,
  #aiView select{
    min-height:48px;
    font-size:16px !important;
  }

  #productsView button,
  #reservationsView button,
  #aiView button{
    min-height:46px;
  }

  #productsView .product-row{
    padding-top:14px !important;
    padding-bottom:14px !important;
  }

  #reservationsView [class*="reservation-card"],
  #reservationsView [class*="reservation-item"],
  #reservationsView [class*="reservation-row"]{
    padding-top:14px !important;
    padding-bottom:14px !important;
  }
}

/* SERVELIO RESTAURANT OS PREMIUM DARK V4 FINAL END */

/* SERVELIO RESTAURANT OS PREMIUM DARK V4 FINAL START
   FINAL REMAINING LIGHT SURFACES
   Scope:
   - Dashboard / Restoran Özeti
   - Product Catalog
   - Reservations
   - AI / Shadow Mode
   CSS ONLY — no runtime/business logic changes
*/

:root{
  --sv-v4-bg:#06141d;
  --sv-v4-bg-2:#081b26;
  --sv-v4-surface:#0b202c;
  --sv-v4-surface-2:#0d2532;
  --sv-v4-surface-3:#102b39;
  --sv-v4-border:rgba(148,190,205,.14);
  --sv-v4-border-strong:rgba(148,190,205,.22);
  --sv-v4-text:#f5fbff;
  --sv-v4-muted:#8ea8b8;
  --sv-v4-muted-2:#6f8999;
  --sv-v4-accent:#12c7b5;
  --sv-v4-accent-soft:rgba(18,199,181,.12);
  --sv-v4-green:#32d296;
  --sv-v4-red:#ff6674;
  --sv-v4-shadow:0 18px 48px rgba(0,0,0,.20);
}

/* ==========================================================
   1. DASHBOARD / RESTORAN ÖZETİ
   ========================================================== */

#dashboardView{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--sv-v4-text) !important;
}

#dashboardView > *{
  border-color:var(--sv-v4-border) !important;
}

#dashboardView .dashboard-stat-card{
  background:
    linear-gradient(
      145deg,
      rgba(16,43,57,.98),
      rgba(8,27,38,.98)
    ) !important;
  border:1px solid var(--sv-v4-border) !important;
  color:var(--sv-v4-text) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.16) !important;
  border-radius:18px !important;
}

#dashboardView .dashboard-stat-card:hover{
  border-color:rgba(18,199,181,.34) !important;
  transform:translateY(-1px);
}

#dashboardView .dashboard-stat-card span,
#dashboardView .dashboard-stat-card small{
  color:var(--sv-v4-muted) !important;
}

#dashboardView .dashboard-stat-card strong{
  color:var(--sv-v4-text) !important;
}

#dashboardView .dashboard-stat-card.revenue{
  background:
    linear-gradient(
      145deg,
      rgba(11,47,52,.98),
      rgba(7,30,36,.98)
    ) !important;
}

#dashboardView .dashboard-stat-card.new{
  border-color:rgba(255,102,116,.20) !important;
}

#dashboardView .dashboard-stat-card.preparing{
  border-color:rgba(255,184,77,.20) !important;
}

#dashboardView .dashboard-stat-card.ready{
  border-color:rgba(50,210,150,.22) !important;
}

#dashboardView .dashboard-stat-card.delivery{
  border-color:rgba(75,155,255,.22) !important;
}

#dashboardView .dashboard-stat-card.completed{
  border-color:rgba(148,190,205,.18) !important;
}

/* Dashboard general cards / recent orders */
#dashboardView .dashboard-card,
#dashboardView .card,
#dashboardView .box{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.98),
      rgba(7,25,35,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border) !important;
  box-shadow:var(--sv-v4-shadow) !important;
}

#dashboardView .dashboard-card h1,
#dashboardView .dashboard-card h2,
#dashboardView .dashboard-card h3,
#dashboardView .card h1,
#dashboardView .card h2,
#dashboardView .card h3,
#dashboardView .box h1,
#dashboardView .box h2,
#dashboardView .box h3{
  color:var(--sv-v4-text) !important;
}

#dashboardRecentOrders{
  background:transparent !important;
  color:var(--sv-v4-text) !important;
}

#dashboardRecentOrders .dashboard-order-row{
  background:var(--sv-v4-surface-2) !important;
  border:1px solid var(--sv-v4-border) !important;
  color:var(--sv-v4-text) !important;
  border-radius:14px !important;
}

#dashboardRecentOrders .dashboard-order-row:hover{
  background:var(--sv-v4-surface-3) !important;
  border-color:rgba(18,199,181,.30) !important;
}

#dashboardRecentOrders strong{
  color:var(--sv-v4-text) !important;
}

#dashboardRecentOrders span,
#dashboardRecentOrders small{
  color:var(--sv-v4-muted) !important;
}

/* Any premium summary cards used by dashboard/runtime */
#dashboardView .sv-summary-card{
  background:
    linear-gradient(
      145deg,
      rgba(13,37,50,.98),
      rgba(8,27,38,.98)
    ) !important;
  border:1px solid var(--sv-v4-border) !important;
  color:var(--sv-v4-text) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.16) !important;
}

#dashboardView .sv-summary-card span{
  color:var(--sv-v4-muted) !important;
}

#dashboardView .sv-summary-card strong{
  color:var(--sv-v4-text) !important;
}


/* ==========================================================
   2. PRODUCTS / ÜRÜN KATALOĞU
   ========================================================== */

#productsView{
  background:transparent !important;
  color:var(--sv-v4-text) !important;
}

/*
  Product catalog toolbar / search card.
  We deliberately scope every override to productsView.
*/
#productsView > div,
#productsView .products-toolbar,
#productsView .product-toolbar,
#productsView [class*="catalog"]{
  border-color:var(--sv-v4-border) !important;
}

/* Catalog containers that were still white */
#productsView .panel,
#productsView .card,
#productsView [class*="catalog-card"]{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.98),
      rgba(8,27,38,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.17) !important;
}

/* Catalog text */
#productsView h1,
#productsView h2,
#productsView h3,
#productsView h4,
#productsView strong,
#productsView label{
  color:var(--sv-v4-text) !important;
}

#productsView p,
#productsView small{
  color:var(--sv-v4-muted) !important;
}

/* Search / selects */
#productsView input[type="text"],
#productsView input[type="search"],
#productsView select{
  background:#071a24 !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border-strong) !important;
  box-shadow:none !important;
}

#productsView input::placeholder{
  color:#688596 !important;
  opacity:1 !important;
}

#productsView select option{
  background:#071a24 !important;
  color:#f5fbff !important;
}

/* Category filter chips */
#productsView button:not(.danger):not([class*="delete"]){
  border-color:var(--sv-v4-border) !important;
}

#productsView .product-row{
  background:transparent !important;
  color:var(--sv-v4-text) !important;
  border-color:var(--sv-v4-border) !important;
}

#productsView .product-row:hover{
  background:rgba(18,199,181,.045) !important;
}

#productsView .product-row strong,
#productsView .product-row b{
  color:var(--sv-v4-text) !important;
}

#productsView .product-row small,
#productsView .product-row p{
  color:var(--sv-v4-muted) !important;
}


/* ==========================================================
   3. RESERVATIONS
   ========================================================== */

#reservationsView{
  background:transparent !important;
  color:var(--sv-v4-text) !important;
}

#reservationsView > div,
#reservationsView > section{
  border-color:var(--sv-v4-border) !important;
}

/* Stats and summary cards */
#reservationsView [class*="stat-card"],
#reservationsView [class*="summary-card"]{
  background:
    linear-gradient(
      145deg,
      rgba(13,37,50,.98),
      rgba(8,27,38,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.16) !important;
}

#reservationsView [class*="stat-card"] span,
#reservationsView [class*="summary-card"] span,
#reservationsView [class*="stat-card"] small,
#reservationsView [class*="summary-card"] small{
  color:var(--sv-v4-muted) !important;
}

#reservationsView [class*="stat-card"] strong,
#reservationsView [class*="summary-card"] strong{
  color:var(--sv-v4-text) !important;
}

/* Search / filters */
#reservationsView input,
#reservationsView select{
  background:#071a24 !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border-strong) !important;
}

#reservationsView input::placeholder{
  color:#688596 !important;
  opacity:1 !important;
}

#reservationsView select option{
  background:#071a24 !important;
  color:#f5fbff !important;
}

/* Reservation list rows */
#reservationsView [class*="reservation-card"],
#reservationsView [class*="reservation-item"],
#reservationsView [class*="reservation-row"]{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.98),
      rgba(8,27,38,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.14) !important;
}

#reservationsView [class*="reservation-card"]:hover,
#reservationsView [class*="reservation-item"]:hover,
#reservationsView [class*="reservation-row"]:hover{
  background:var(--sv-v4-surface-2) !important;
  border-color:rgba(18,199,181,.30) !important;
}

#reservationsView [class*="reservation-card"] strong,
#reservationsView [class*="reservation-item"] strong,
#reservationsView [class*="reservation-row"] strong{
  color:var(--sv-v4-text) !important;
}

#reservationsView [class*="reservation-card"] small,
#reservationsView [class*="reservation-item"] small,
#reservationsView [class*="reservation-row"] small{
  color:var(--sv-v4-muted) !important;
}


/* ==========================================================
   4. AI ZENTRALE / SHADOW MODE
   ========================================================== */

#aiView{
  background:transparent !important;
  color:var(--sv-v4-text) !important;
}

#aiView .card,
#aiView .box,
#aiView section{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.98),
      rgba(7,25,35,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border-color:var(--sv-v4-border) !important;
}

/* Header / status surfaces */
#aiView h1,
#aiView h2,
#aiView h3,
#aiView h4,
#aiView strong{
  color:var(--sv-v4-text) !important;
}

#aiView p,
#aiView small,
#aiView label{
  color:var(--sv-v4-muted) !important;
}

/* AI approval/action cards */
#aiView .ai-action-card{
  background:
    linear-gradient(
      145deg,
      rgba(13,37,50,.98),
      rgba(8,27,38,.98)
    ) !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.18) !important;
}

#aiView .ai-action-card:hover{
  border-color:rgba(18,199,181,.32) !important;
  background:
    linear-gradient(
      145deg,
      rgba(15,43,56,.98),
      rgba(9,31,42,.98)
    ) !important;
}

#aiView .ai-action-top,
#aiView .ai-action-footer,
#aiView .ai-action-customer,
#aiView .ai-action-details{
  color:var(--sv-v4-text) !important;
  border-color:var(--sv-v4-border) !important;
}

#aiView .ai-action-details > div{
  background:#071a24 !important;
  border:1px solid var(--sv-v4-border) !important;
  color:var(--sv-v4-text) !important;
}

#aiView .ai-action-details span,
#aiView .ai-action-customer span,
#aiView .ai-action-footer small{
  color:var(--sv-v4-muted) !important;
}

#aiView .ai-action-details strong,
#aiView .ai-action-customer strong,
#aiView .ai-action-top strong{
  color:var(--sv-v4-text) !important;
}

/* AI list empty/loading surfaces */
#aiView .ai-actions-list{
  color:var(--sv-v4-text) !important;
}


/* ==========================================================
   5. COMMON DARK FORM SURFACES — ONLY THESE FOUR VIEWS
   ========================================================== */

#dashboardView input,
#dashboardView select,
#dashboardView textarea,
#productsView textarea,
#reservationsView textarea,
#aiView input,
#aiView select,
#aiView textarea{
  background:#071a24 !important;
  color:var(--sv-v4-text) !important;
  border:1px solid var(--sv-v4-border-strong) !important;
}

#dashboardView input::placeholder,
#dashboardView textarea::placeholder,
#productsView textarea::placeholder,
#reservationsView textarea::placeholder,
#aiView input::placeholder,
#aiView textarea::placeholder{
  color:#688596 !important;
  opacity:1 !important;
}


/* ==========================================================
   6. RESPONSIVE
   Desktop >=1200
   Tablet 761-1200
   Mobile <=760
   ========================================================== */

@media (min-width:1201px){
  #dashboardView .dashboard-stat-card{
    min-height:108px;
  }

  #productsView .product-row{
    min-height:72px;
  }

  #reservationsView [class*="reservation-card"],
  #reservationsView [class*="reservation-item"],
  #reservationsView [class*="reservation-row"]{
    min-height:78px;
  }
}

@media (min-width:761px) and (max-width:1200px){
  #dashboardView .dashboard-stat-card{
    border-radius:16px !important;
  }

  #productsView input,
  #productsView select,
  #reservationsView input,
  #reservationsView select{
    min-height:46px;
  }

  #productsView button,
  #reservationsView button,
  #aiView button{
    min-height:44px;
  }

  #reservationsView [class*="reservation-card"],
  #reservationsView [class*="reservation-item"],
  #reservationsView [class*="reservation-row"]{
    border-radius:16px !important;
  }
}

@media (max-width:760px){
  #dashboardView .dashboard-stat-card,
  #dashboardView .dashboard-card,
  #dashboardView .card,
  #dashboardView .box,
  #productsView .panel,
  #productsView .card,
  #productsView [class*="catalog-card"],
  #reservationsView [class*="stat-card"],
  #reservationsView [class*="summary-card"],
  #reservationsView [class*="reservation-card"],
  #reservationsView [class*="reservation-item"],
  #reservationsView [class*="reservation-row"],
  #aiView .ai-action-card{
    border-radius:15px !important;
  }

  #productsView input,
  #productsView select,
  #reservationsView input,
  #reservationsView select,
  #aiView input,
  #aiView select{
    min-height:48px;
    font-size:16px !important;
  }

  #productsView button,
  #reservationsView button,
  #aiView button{
    min-height:46px;
  }

  #productsView .product-row{
    padding-top:14px !important;
    padding-bottom:14px !important;
  }

  #reservationsView [class*="reservation-card"],
  #reservationsView [class*="reservation-item"],
  #reservationsView [class*="reservation-row"]{
    padding-top:14px !important;
    padding-bottom:14px !important;
  }
}

/* SERVELIO RESTAURANT OS PREMIUM DARK V4 FINAL END */

/* SERVELIO RESTAURANT OS DARK V5 COLOR CLOSEOUT START
   FINAL COLOR CLOSEOUT
   ONLY:
   1) Products -> Product Catalog toolbar/card
   2) Dashboard -> Operations readiness + Sales Analysis KPI surfaces
   No HTML/JS/backend changes.
*/

:root{
  --sv5-bg:#06141d;
  --sv5-surface:#0a1f2a;
  --sv5-surface-2:#0c2532;
  --sv5-surface-3:#102d3b;
  --sv5-line:rgba(148,190,205,.14);
  --sv5-line-strong:rgba(148,190,205,.23);
  --sv5-text:#f5fbff;
  --sv5-muted:#8da8b8;
  --sv5-muted-2:#6f8b9c;
  --sv5-teal:#10c7b5;
  --sv5-teal-soft:rgba(16,199,181,.10);
}


/* =========================================================
   A. PRODUCTS — PRODUCT CATALOG WHITE TOOLBAR
   ========================================================= */

/*
   Screenshot target:
   "Ürün Kataloğu"
   "Ürünleri hızlıca bulun ve yönetin"
   search + category + sort + chips.
*/

/* direct product containers */
#productsView > div,
#productsView > section{
  border-color:var(--sv5-line) !important;
}

/*
   V4 showed that catalog itself can be nested inside generic
   wrappers. We darken the actual catalog area without touching
   product edit modals.
*/
#productsView [class*="catalog"],
#productsView [class*="Catalog"],
#productsView .products-toolbar,
#productsView .product-toolbar,
#productsView .products-filter,
#productsView .product-filter,
#productsView .filters,
#productsView .filter-bar,
#productsView .toolbar{
  background:
    linear-gradient(
      145deg,
      rgba(12,37,50,.99),
      rgba(7,26,36,.99)
    ) !important;
  color:var(--sv5-text) !important;
  border-color:var(--sv5-line) !important;
  box-shadow:none !important;
}

/*
   The remaining large white catalog box contains the search
   controls. :has() scopes the override by content, instead of
   changing every generic white card in Products.
*/
#productsView div:has(> input[type="search"]),
#productsView div:has(> input[type="text"]):has(select),
#productsView div:has(input[type="search"]):has(select),
#productsView div:has(input[placeholder*="Ürün"]):has(select),
#productsView div:has(input[placeholder*="Urun"]):has(select),
#productsView div:has(input[placeholder*="Product"]):has(select),
#productsView div:has(input[placeholder*="Produkt"]):has(select){
  background:
    linear-gradient(
      145deg,
      rgba(12,37,50,.99),
      rgba(7,26,36,.99)
    ) !important;
  color:var(--sv5-text) !important;
  border-color:var(--sv5-line) !important;
}

/* Product catalog headings */
#productsView [class*="catalog"] h1,
#productsView [class*="catalog"] h2,
#productsView [class*="catalog"] h3,
#productsView [class*="catalog"] h4,
#productsView [class*="catalog"] strong,
#productsView div:has(input[placeholder*="Ürün"]) h1,
#productsView div:has(input[placeholder*="Ürün"]) h2,
#productsView div:has(input[placeholder*="Ürün"]) h3,
#productsView div:has(input[placeholder*="Ürün"]) strong{
  color:var(--sv5-text) !important;
}

#productsView [class*="catalog"] p,
#productsView [class*="catalog"] small,
#productsView div:has(input[placeholder*="Ürün"]) p,
#productsView div:has(input[placeholder*="Ürün"]) small{
  color:var(--sv5-muted) !important;
}

/* Search */
#productsView input[type="search"],
#productsView input[type="text"]{
  background:#061923 !important;
  color:var(--sv5-text) !important;
  border:1px solid var(--sv5-line-strong) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

#productsView input[type="search"]::placeholder,
#productsView input[type="text"]::placeholder{
  color:#718e9f !important;
  opacity:1 !important;
}

/* Catalog selects */
#productsView select{
  background:#061923 !important;
  color:var(--sv5-text) !important;
  border:1px solid var(--sv5-line-strong) !important;
}

#productsView select option{
  background:#071a24 !important;
  color:#f5fbff !important;
}

/* Filter chips inside catalog */
#productsView [class*="catalog"] button,
#productsView .products-toolbar button,
#productsView .product-toolbar button,
#productsView .filters button,
#productsView .filter-bar button{
  background:#0d2734 !important;
  color:#dcebf2 !important;
  border:1px solid var(--sv5-line-strong) !important;
}

#productsView [class*="catalog"] button:hover,
#productsView .filters button:hover,
#productsView .filter-bar button:hover{
  background:#123441 !important;
  border-color:rgba(16,199,181,.32) !important;
}

/* selected chip remains visually strong */
#productsView [class*="catalog"] button.active,
#productsView [class*="catalog"] button[aria-selected="true"],
#productsView [class*="catalog"] button[aria-pressed="true"]{
  background:var(--sv5-teal) !important;
  color:#03201e !important;
  border-color:var(--sv5-teal) !important;
}

/* Count badge e.g. 25 / 25 Produkte */
#productsView [class*="badge"],
#productsView [class*="count"]{
  background:#102b38 !important;
  color:#d9e8ef !important;
  border-color:var(--sv5-line) !important;
}


/* =========================================================
   B. DASHBOARD — SERVELIO OPERATIONS / READINESS
   ========================================================= */

/*
   Screenshot target:
   SERVELIO OPERATIONS
   İşletme Hazırlık Durumu
   AI ve operasyon motorlarının...
*/

/*
   Runtime class names can vary, so scope to dashboard and
   identify operational blocks by their common structural classes.
*/
#dashboardView [class*="readiness"],
#dashboardView [class*="Readiness"],
#dashboardView [class*="operations"],
#dashboardView [class*="Operations"],
#dashboardView [class*="health"],
#dashboardView [class*="Health"],
#dashboardView [class*="status-panel"],
#dashboardView [class*="status-card"]{
  background:
    linear-gradient(
      145deg,
      rgba(11,34,46,.99),
      rgba(7,26,36,.99)
    ) !important;
  color:var(--sv5-text) !important;
  border-color:var(--sv5-line) !important;
}

/*
   Structural fallback:
   operational readiness block contains several child cards.
*/
#dashboardView div:has(> div > [class*="ready"]),
#dashboardView section:has([class*="ready"]),
#dashboardView div:has([class*="readiness"]){
  background:
    linear-gradient(
      145deg,
      rgba(11,34,46,.99),
      rgba(7,26,36,.99)
    ) !important;
  color:var(--sv5-text) !important;
  border-color:var(--sv5-line) !important;
}

/* Dashboard headings/text */
#dashboardView [class*="readiness"] h1,
#dashboardView [class*="readiness"] h2,
#dashboardView [class*="readiness"] h3,
#dashboardView [class*="operations"] h1,
#dashboardView [class*="operations"] h2,
#dashboardView [class*="operations"] h3,
#dashboardView [class*="health"] h1,
#dashboardView [class*="health"] h2,
#dashboardView [class*="health"] h3{
  color:var(--sv5-text) !important;
}

#dashboardView [class*="readiness"] p,
#dashboardView [class*="operations"] p,
#dashboardView [class*="health"] p,
#dashboardView [class*="readiness"] small,
#dashboardView [class*="operations"] small,
#dashboardView [class*="health"] small{
  color:var(--sv5-muted) !important;
}

/* Inner operational cards */
#dashboardView [class*="readiness"] > div > div,
#dashboardView [class*="operations"] > div > div,
#dashboardView [class*="health"] > div > div{
  background:
    linear-gradient(
      145deg,
      rgba(16,45,59,.98),
      rgba(11,34,46,.98)
    ) !important;
  color:var(--sv5-text) !important;
  border-color:var(--sv5-line) !important;
}

/* =========================================================
   C. DASHBOARD — SALES ANALYSIS KPI WHITE CARDS
   ========================================================= */

/*
   Screenshot target:
   Dönem Cirosu / Sipariş / Ortalama Sepet
*/

#dashboardView [class*="sales"] [class*="card"],
#dashboardView [class*="Sales"] [class*="card"],
#dashboardView [class*="analytics"] [class*="card"],
#dashboardView [class*="Analytics"] [class*="card"],
#dashboardView [class*="metric"],
#dashboardView [class*="Metric"],
#dashboardView [class*="kpi"],
#dashboardView [class*="Kpi"],
#dashboardView [class*="KPI"]{
  background:
    linear-gradient(
      145deg,
      rgba(13,39,52,.99),
      rgba(8,28,38,.99)
    ) !important;
  color:var(--sv5-text) !important;
  border:1px solid var(--sv5-line) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.14) !important;
}

/*
   Existing dashboard-stat-card family can also be used by
   analysis widgets. Force final surface here.
*/
#dashboardView .dashboard-stat-card{
  background:
    linear-gradient(
      145deg,
      rgba(13,39,52,.99),
      rgba(8,28,38,.99)
    ) !important;
  color:var(--sv5-text) !important;
  border-color:var(--sv5-line) !important;
}

#dashboardView [class*="metric"] strong,
#dashboardView [class*="kpi"] strong,
#dashboardView [class*="KPI"] strong,
#dashboardView .dashboard-stat-card strong{
  color:var(--sv5-text) !important;
}

#dashboardView [class*="metric"] span,
#dashboardView [class*="kpi"] span,
#dashboardView [class*="KPI"] span,
#dashboardView .dashboard-stat-card span,
#dashboardView .dashboard-stat-card small{
  color:var(--sv5-muted) !important;
}


/* =========================================================
   D. FINAL WHITE-SURFACE GUARD
   Only dashboard/products, never global.
   ========================================================= */

/*
   Catch known generic content cards inside the two target views,
   while excluding buttons, modals and image previews.
*/
#dashboardView .card:not(.modal):not([role="dialog"]),
#dashboardView .box:not(.modal):not([role="dialog"]),
#productsView .card:not(.modal):not([role="dialog"]),
#productsView .box:not(.modal):not([role="dialog"]){
  background-color:var(--sv5-surface) !important;
  border-color:var(--sv5-line) !important;
  color:var(--sv5-text) !important;
}


/* =========================================================
   E. RESPONSIVE — preserve Desktop / Tablet / Mobile
   ========================================================= */

@media (min-width:1201px){
  #productsView [class*="catalog"]{
    border-radius:18px !important;
  }
}

@media (min-width:761px) and (max-width:1200px){
  #productsView [class*="catalog"],
  #dashboardView [class*="readiness"],
  #dashboardView [class*="operations"],
  #dashboardView [class*="health"]{
    border-radius:16px !important;
  }

  #productsView input,
  #productsView select{
    min-height:46px !important;
  }
}

@media (max-width:760px){
  #productsView [class*="catalog"],
  #dashboardView [class*="readiness"],
  #dashboardView [class*="operations"],
  #dashboardView [class*="health"],
  #dashboardView [class*="metric"],
  #dashboardView [class*="kpi"]{
    border-radius:15px !important;
  }

  #productsView input,
  #productsView select{
    min-height:48px !important;
    font-size:16px !important;
  }
}

/* SERVELIO RESTAURANT OS DARK V5 COLOR CLOSEOUT END */
/* SERVELIO FINAL TWO SURFACES CLOSEOUT V1 START
   Scope:
   1) Dashboard readiness + analytics KPI surfaces
   2) AI Zentrale stats + approval/action surfaces
   CSS ONLY — backend/Core/DB untouched
*/

:root{
  --sv-final-bg:#06141d;
  --sv-final-surface:#0b202c;
  --sv-final-surface-2:#0d2532;
  --sv-final-surface-3:#102b39;
  --sv-final-border:rgba(148,190,205,.16);
  --sv-final-border-strong:rgba(148,190,205,.24);
  --sv-final-text:#f5fbff;
  --sv-final-muted:#8ea8b8;
  --sv-final-muted-2:#6f8999;
  --sv-final-accent:#12c7b5;
  --sv-final-accent-soft:rgba(18,199,181,.12);
  --sv-final-green:#32d296;
  --sv-final-shadow:0 16px 38px rgba(0,0,0,.18);
}


/* ============================================================
   1. DASHBOARD — SERVELIO OPERATIONS / READINESS
   ============================================================ */

#dashboardView #servelioReadinessPanel,
#dashboardView .sv-readiness-shell{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.99),
      rgba(8,27,38,.99)
    ) !important;
  border:1px solid var(--sv-final-border) !important;
  color:var(--sv-final-text) !important;
  box-shadow:var(--sv-final-shadow) !important;
}

#dashboardView .sv-readiness-shell::before{
  opacity:.14 !important;
}

#dashboardView .sv-readiness-head{
  background:transparent !important;
  color:var(--sv-final-text) !important;
}

#dashboardView .sv-readiness-eyebrow{
  color:var(--sv-final-accent) !important;
}

#dashboardView .sv-readiness-head h1,
#dashboardView .sv-readiness-head h2,
#dashboardView .sv-readiness-head h3,
#dashboardView .sv-readiness-head h4{
  color:var(--sv-final-text) !important;
}

#dashboardView .sv-readiness-head p{
  color:var(--sv-final-muted) !important;
}

#dashboardView .sv-readiness-card{
  background:
    linear-gradient(
      145deg,
      rgba(16,43,57,.96),
      rgba(8,27,38,.98)
    ) !important;
  border:1px solid var(--sv-final-border) !important;
  color:var(--sv-final-text) !important;
  box-shadow:none !important;
}

#dashboardView .sv-readiness-card:hover{
  border-color:var(--sv-final-border-strong) !important;
  background:
    linear-gradient(
      145deg,
      rgba(18,48,63,.98),
      rgba(9,30,41,.99)
    ) !important;
}

#dashboardView .sv-readiness-label{
  color:var(--sv-final-muted) !important;
}

#dashboardView .sv-readiness-card > strong{
  color:var(--sv-final-text) !important;
}

#dashboardView .sv-readiness-card p,
#dashboardView .sv-readiness-card small{
  color:var(--sv-final-muted) !important;
}

#dashboardView .sv-readiness-foot{
  border-color:var(--sv-final-border) !important;
  color:var(--sv-final-muted) !important;
}

#dashboardView .sv-readiness-time{
  color:var(--sv-final-muted) !important;
}

#dashboardView .sv-readiness-icon{
  background:#061923 !important;
  border:1px solid var(--sv-final-border) !important;
  color:var(--sv-final-accent) !important;
}

#dashboardView .sv-readiness-overall.ready,
#dashboardView .sv-readiness-badge.ready{
  background:rgba(50,210,150,.12) !important;
  border-color:rgba(50,210,150,.25) !important;
  color:#7ff0c3 !important;
}

#dashboardView .sv-readiness-refresh{
  background:#102b39 !important;
  border:1px solid var(--sv-final-border-strong) !important;
  color:var(--sv-final-text) !important;
}

#dashboardView .sv-readiness-refresh:hover{
  background:#153746 !important;
  border-color:rgba(18,199,181,.38) !important;
}


/* ============================================================
   DASHBOARD — SATIŞ ANALİZİ KPI
   Dönem Cirosu / Sipariş / Ortalama Sepet
   ============================================================ */

#dashboardView .dashboard-analytics{
  color:var(--sv-final-text) !important;
}

#dashboardView .analytics-head h3{
  color:var(--sv-final-text) !important;
}

#dashboardView .analytics-head .muted,
#dashboardView .analytics-head p{
  color:var(--sv-final-muted) !important;
}

#dashboardView .analytics-summary > div{
  background:
    linear-gradient(
      145deg,
      rgba(16,43,57,.98),
      rgba(8,27,38,.98)
    ) !important;
  border:1px solid var(--sv-final-border) !important;
  color:var(--sv-final-text) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.14) !important;
}

#dashboardView .analytics-summary span{
  color:var(--sv-final-muted) !important;
}

#dashboardView .analytics-summary strong{
  color:var(--sv-final-text) !important;
}

#dashboardView .analytics-card{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.98),
      rgba(8,27,38,.98)
    ) !important;
  border:1px solid var(--sv-final-border) !important;
  color:var(--sv-final-text) !important;
}

#dashboardView .analytics-card-head{
  border-color:var(--sv-final-border) !important;
}

#dashboardView .analytics-card-head h3{
  color:var(--sv-final-text) !important;
}


/* ============================================================
   2. AI ZENTRALE
   ============================================================ */

#aiView{
  background:transparent !important;
  color:var(--sv-final-text) !important;
}


/* Üstteki büyük Yenile alanı dahil AI içindeki genel panel yüzeyleri */

#aiView > .box,
#aiView > .panel,
#aiView > .card{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.98),
      rgba(8,27,38,.98)
    ) !important;
  border:1px solid var(--sv-final-border) !important;
  color:var(--sv-final-text) !important;
  box-shadow:var(--sv-final-shadow) !important;
}


/* AUSSTEHEND / SHADOW MODE */

#aiView .ai-stats{
  background:transparent !important;
}

#aiView .ai-stat{
  background:
    linear-gradient(
      145deg,
      rgba(16,43,57,.98),
      rgba(8,27,38,.98)
    ) !important;
  border:1px solid var(--sv-final-border) !important;
  color:var(--sv-final-text) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.14) !important;
}

#aiView .ai-stat::after{
  background:var(--sv-final-accent) !important;
}

#aiView .ai-stat span{
  color:var(--sv-final-muted) !important;
  opacity:1 !important;
}

#aiView .ai-stat strong{
  color:var(--sv-final-text) !important;
}


/* AI sipariş / rezervasyon approval kartları */

#aiView .ai-action-card{
  background:
    linear-gradient(
      145deg,
      rgba(11,32,44,.99),
      rgba(8,27,38,.99)
    ) !important;
  border:1px solid var(--sv-final-border) !important;
  color:var(--sv-final-text) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.16) !important;
}

#aiView .ai-action-card:hover{
  border-color:var(--sv-final-border-strong) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.20) !important;
}

#aiView .ai-action-top strong{
  color:var(--sv-final-text) !important;
}

#aiView .ai-action-id{
  background:#173442 !important;
  color:#b8ccd7 !important;
}

#aiView .ai-action-customer{
  background:#071a24 !important;
  border:1px solid var(--sv-final-border) !important;
  color:var(--sv-final-text) !important;
}

#aiView .ai-action-customer strong{
  color:var(--sv-final-text) !important;
}

#aiView .ai-action-customer span,
#aiView .ai-action-card small,
#aiView .ai-action-card .muted{
  color:var(--sv-final-muted) !important;
}


/* AI kartlarının iç bilgi kutuları */

#aiView .ai-action-card [class*="detail"],
#aiView .ai-action-card [class*="info"],
#aiView .ai-action-card [class*="meta"]{
  background:#071a24 !important;
  border-color:var(--sv-final-border) !important;
  color:var(--sv-final-text) !important;
}


/* Pending / completed status */

#aiView .ai-status{
  border:1px solid var(--sv-final-border) !important;
}

#aiView .ai-status.pending{
  background:rgba(245,158,11,.12) !important;
  border-color:rgba(245,158,11,.24) !important;
  color:#ffd27d !important;
  box-shadow:none !important;
}

#aiView .ai-status.completed{
  background:rgba(50,210,150,.12) !important;
  border-color:rgba(50,210,150,.24) !important;
  color:#7ff0c3 !important;
  box-shadow:none !important;
}


/* AI içindeki normal butonlar */

#aiView button:not(.ai-approve):not(.danger){
  border-color:var(--sv-final-border-strong) !important;
}

#aiView .ai-reject{
  background:#102b39 !important;
  border:1px solid var(--sv-final-border-strong) !important;
  color:var(--sv-final-text) !important;
}

#aiView .ai-approve{
  background:var(--sv-final-accent) !important;
  color:#031519 !important;
}


/* ============================================================
   HARD CLOSE — yalnızca hedeflediğimiz iki view içinde kalan
   eski beyaz kart sınıflarını kapat.
   ============================================================ */

#dashboardView .analytics-summary > div,
#dashboardView #servelioReadinessPanel,
#dashboardView #servelioReadinessPanel .sv-readiness-card,
#aiView .ai-stat,
#aiView .ai-action-card{
  background-color:var(--sv-final-surface) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1200px){

  #dashboardView .sv-readiness-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  #dashboardView .analytics-summary{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

  #aiView .ai-stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }
}


@media (max-width:760px){

  #dashboardView .sv-readiness-grid,
  #dashboardView .analytics-summary,
  #aiView .ai-stats{
    grid-template-columns:
      1fr !important;
  }

  #dashboardView .sv-readiness-head{
    align-items:flex-start !important;
  }

  #dashboardView .sv-readiness-head-right{
    width:100% !important;
  }

  #dashboardView .sv-readiness-refresh{
    min-height:46px !important;
  }

  #aiView .ai-action-card{
    padding:16px !important;
  }
}

/* SERVELIO FINAL TWO SURFACES CLOSEOUT V1 END */

/* ==========================================================
   SERVELIO AI ZENTRALE — HEADER DARK FINAL V1
   FINAL remaining light surface
   Scope ONLY: #aiView > .ai-head
   ========================================================== */

body.sv-premium-admin-ready #aiView > .ai-head{
  background:
    linear-gradient(
      135deg,
      rgba(13,37,50,.98) 0%,
      rgba(8,29,40,.98) 58%,
      rgba(7,42,48,.98) 100%
    ) !important;

  border:
    1px solid rgba(92,135,153,.20) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.16) !important;

  color:#f4f8fa !important;
}


/* Eski açık AI watermark/overlay görünümünü karart */
body.sv-premium-admin-ready #aiView > .ai-head::before{
  background:
    radial-gradient(
      circle,
      rgba(18,199,181,.10) 0%,
      rgba(18,199,181,0) 70%
    ) !important;

  opacity:1 !important;
}


body.sv-premium-admin-ready #aiView > .ai-head::after{
  color:
    rgba(18,199,181,.055) !important;

  opacity:1 !important;
}


/* Başlık ve açıklama */
body.sv-premium-admin-ready #aiView > .ai-head .ai-kicker{
  color:#12c7b5 !important;
}

body.sv-premium-admin-ready #aiView > .ai-head h1{
  color:#f4f8fa !important;
}

body.sv-premium-admin-ready #aiView > .ai-head p{
  color:#8fa8b7 !important;
}


/* Yenile butonu */
body.sv-premium-admin-ready #aiView > .ai-head #aiRefreshBtn{
  background:
    linear-gradient(
      135deg,
      #13c9b8,
      #0cae9f
    ) !important;

  color:#031417 !important;

  border:
    1px solid rgba(43,231,210,.34) !important;

  box-shadow:
    0 8px 22px rgba(18,199,181,.16) !important;

  font-weight:800 !important;
}

body.sv-premium-admin-ready #aiView > .ai-head #aiRefreshBtn:hover{
  background:
    linear-gradient(
      135deg,
      #22d7c5,
      #10b9a9
    ) !important;

  transform:translateY(-1px);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (min-width:1201px){

  body.sv-premium-admin-ready #aiView > .ai-head{
    min-height:98px !important;
  }

}


@media (min-width:761px) and (max-width:1200px){

  body.sv-premium-admin-ready #aiView > .ai-head{
    min-height:92px !important;
  }

}


@media (max-width:760px){

  body.sv-premium-admin-ready #aiView > .ai-head{
    min-height:0 !important;
  }

  body.sv-premium-admin-ready
  #aiView > .ai-head
  #aiRefreshBtn{
    width:100% !important;
  }

}

/* SERVELIO AI ZENTRALE — HEADER DARK FINAL V1 END */

/* SERVELIO RESTAURANT OPERATIONS FINAL V1 CSS START */


/* ==========================================================
   FOUNDATION
   ========================================================== */

body.sv-operations-final-v1{
  overflow-x:hidden;
}

body.sv-operations-final-v1 .main{
  min-width:0;
}

body.sv-operations-final-v1 button,
body.sv-operations-final-v1 select,
body.sv-operations-final-v1 input{
  font-family:inherit;
}


/* ==========================================================
   SIDEBAR — RESTAURANT OS
   ========================================================== */

body.sv-operations-final-v1 .sidebar{
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
}

body.sv-operations-final-v1 .sidebar .side-brand{
  margin-bottom:14px;
}

.sv-operations-restaurant-card{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 22px;
  padding:11px;
  border-radius:14px;
  border:1px solid rgba(148,190,205,.14);
  background:rgba(255,255,255,.035);
}

.sv-operations-restaurant-logo{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:rgba(18,199,181,.12);
  border:1px solid rgba(18,199,181,.20);
  color:#28d8c6;
  font-weight:900;
  font-size:16px;
}

.sv-operations-restaurant-meta{
  min-width:0;
}

.sv-operations-restaurant-meta strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f5fbff;
  font-size:13px;
  line-height:1.3;
}

.sv-operations-restaurant-meta span{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  color:#819aa9;
  font-size:11px;
  font-weight:700;
}

.sv-operations-restaurant-meta i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#32d296;
  box-shadow:0 0 0 4px rgba(50,210,150,.08);
}

.sv-operations-nav-label{
  margin:0 10px 7px;
  color:#526d7d;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
}

body.sv-operations-final-v1 .sidebar .nav{
  position:relative;
  display:flex;
  align-items:center;
  min-height:43px;
  padding-left:43px !important;
  border-radius:11px;
}

body.sv-operations-final-v1 .sidebar .nav::before{
  content:attr(data-sv-icon);
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#7993a2;
  font-size:15px;
  font-weight:900;
}

body.sv-operations-final-v1 .sidebar .nav.active::before,
body.sv-operations-final-v1 .sidebar .nav:hover::before{
  color:#21d1bf;
}


/* ==========================================================
   TOP SHELL
   ========================================================== */

body.sv-operations-final-v1 .sv-admin-shell-top{
  margin-bottom:10px;
}

body.sv-operations-final-v1 .sv-admin-context-title h1{
  letter-spacing:-.035em;
}


/* ==========================================================
   OPERATIONS STRIP
   ========================================================== */

.sv-operations-strip{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px;
  padding:8px 10px 8px 14px;
  border-radius:15px;
  border:1px solid rgba(148,190,205,.13);
  background:rgba(7,26,36,.72);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  backdrop-filter:blur(12px);
}

.sv-operations-strip-left,
.sv-operations-strip-actions{
  display:flex;
  align-items:center;
}

.sv-operations-strip-left{
  gap:15px;
  min-width:0;
}

.sv-operations-strip-actions{
  gap:7px;
}

.sv-operations-status{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  color:#91a9b7;
  font-size:11px;
}

.sv-operations-status strong{
  color:#bcd0da;
  font-size:11px;
}

.sv-operations-status i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#32d296;
  box-shadow:0 0 0 5px rgba(50,210,150,.08);
}

.sv-operations-view-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#607d8d;
  font-size:11px;
  font-weight:800;
}

.sv-operations-command{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 13px;
  border-radius:10px;
  border:1px solid rgba(148,190,205,.14);
  background:rgba(255,255,255,.035);
  color:#afc3ce;
  font-size:11px;
  font-weight:800;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.sv-operations-command:hover{
  transform:translateY(-1px);
  border-color:rgba(18,199,181,.28);
  background:rgba(18,199,181,.07);
}

.sv-operations-command.primary{
  color:#06221f;
  border-color:rgba(35,222,202,.28);
  background:#16c8b6;
}

.sv-operations-command.primary:hover{
  background:#24d4c2;
}


/* ==========================================================
   DASHBOARD — DAILY OPERATIONS
   ========================================================== */

body.sv-operations-final-v1
#dashboardView.sv-operations-dashboard{
  min-width:0;
}

body.sv-operations-final-v1
#dashboardView .dashboard-grid{
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:12px;
}

body.sv-operations-final-v1
#dashboardView .dashboard-stat-card{
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

body.sv-operations-final-v1
#dashboardView .dashboard-stat-card strong{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
}

body.sv-operations-final-v1
#dashboardView .dashboard-lower-grid{
  gap:14px;
}

body.sv-operations-final-v1
#dashboardView .dashboard-operation-list > div{
  min-height:48px;
}


/* Readiness = secondary information */
body.sv-operations-final-v1
#dashboardView .sv-operations-readiness{
  margin-top:16px;
}

/* Analytics = secondary information */
body.sv-operations-final-v1
#dashboardView .sv-operations-analytics{
  margin-top:16px;
}


/* ==========================================================
   LIVE ORDERS — OPERATIONS PRIORITY
   ========================================================== */

body.sv-operations-final-v1
#ordersView.sv-operations-orders{
  min-width:0;
}

body.sv-operations-final-v1
#ordersView #svLiveOrdersApp{
  min-width:0;
}

body.sv-operations-final-v1
#ordersView .sv-live-board{
  align-items:stretch;
}

body.sv-operations-final-v1
#ordersView .sv-live-column{
  min-width:0;
}

body.sv-operations-final-v1
#ordersView .sv-live-card{
  transition:
    transform .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}

body.sv-operations-final-v1
#ordersView .sv-live-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,0,0,.18);
}


/* ==========================================================
   BUTTON / TOUCH CONSISTENCY
   ========================================================== */

body.sv-operations-final-v1
#appView button{
  min-height:38px;
}

body.sv-operations-final-v1.sv-touch-device
#appView button{
  min-height:46px;
}

body.sv-operations-final-v1.sv-touch-device
.sidebar .nav{
  min-height:48px;
}


/* ==========================================================
   SECONDARY MODULES
   ========================================================== */

body.sv-operations-final-v1
.sv-operations-secondary-view{
  min-width:0;
}

body.sv-operations-final-v1
.sv-operations-secondary-view
.panel-head,
body.sv-operations-final-v1
.sv-operations-secondary-view
.categories-head{
  gap:14px;
}


/* ==========================================================
   TABLES / ROWS
   ========================================================== */

body.sv-operations-final-v1
.category-row,
body.sv-operations-final-v1
.product-row,
body.sv-operations-final-v1
.order-row{
  min-width:0;
}

body.sv-operations-final-v1
.category-row > *,
body.sv-operations-final-v1
.product-row > *,
body.sv-operations-final-v1
.order-row > *{
  min-width:0;
}


/* ==========================================================
   DESKTOP ≥ 1201
   ========================================================== */

@media (min-width:1201px){

  body.sv-operations-final-v1 .main{
    width:calc(100% - 240px);
  }

  body.sv-operations-final-v1
  #dashboardView .dashboard-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  body.sv-operations-final-v1
  #ordersView .sv-live-board{
    width:100%;
  }

}


/* ==========================================================
   TABLET 761 — 1200
   ========================================================== */

@media (min-width:761px) and (max-width:1200px){

  body.sv-operations-final-v1 .main{
    min-width:0;
  }

  body.sv-operations-final-v1
  .sv-admin-shell-top{
    gap:14px;
  }

  body.sv-operations-final-v1
  .sv-admin-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  body.sv-operations-final-v1
  .sv-operations-strip{
    align-items:flex-start;
  }

  body.sv-operations-final-v1
  #dashboardView .dashboard-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  body.sv-operations-final-v1
  #dashboardView .dashboard-lower-grid{
    grid-template-columns:1fr;
  }

  body.sv-operations-final-v1
  #ordersView .sv-live-board{
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding-bottom:8px;
  }

  body.sv-operations-final-v1
  #ordersView .sv-live-column{
    scroll-snap-align:start;
  }

}


/* ==========================================================
   MOBILE ≤ 760
   ========================================================== */

@media (max-width:760px){

  body.sv-operations-final-v1 .sidebar{
    position:fixed;
    height:100dvh;
  }

  body.sv-operations-final-v1 .main{
    width:100%;
    max-width:100%;
    padding-left:12px;
    padding-right:12px;
  }

  body.sv-operations-final-v1
  .sv-admin-shell-top{
    margin-top:8px;
  }

  .sv-operations-strip{
    flex-direction:column;
    align-items:stretch;
    padding:10px;
    border-radius:13px;
  }

  .sv-operations-strip-left{
    justify-content:space-between;
    width:100%;
  }

  .sv-operations-strip-actions{
    display:grid;
    grid-template-columns:
      repeat(3,minmax(0,1fr));
    width:100%;
  }

  .sv-operations-command{
    width:100%;
    min-width:0;
    padding:0 8px;
  }

  body.sv-operations-final-v1
  #dashboardView .dashboard-grid{
    grid-template-columns:1fr;
  }

  body.sv-operations-final-v1
  #dashboardView .dashboard-stat-card{
    min-height:102px;
  }

  body.sv-operations-final-v1
  #dashboardView .dashboard-lower-grid,
  body.sv-operations-final-v1
  #dashboardView .analytics-chart-grid,
  body.sv-operations-final-v1
  #dashboardView .analytics-bottom-grid{
    grid-template-columns:1fr !important;
  }

  body.sv-operations-final-v1
  #ordersView .sv-live-board{
    display:flex !important;
    overflow-x:auto;
    gap:10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
  }

  body.sv-operations-final-v1
  #ordersView .sv-live-column{
    flex:0 0 min(88vw,340px);
    width:min(88vw,340px);
    scroll-snap-align:start;
  }

  body.sv-operations-final-v1
  .categories-head,
  body.sv-operations-final-v1
  .panel-head{
    max-width:100%;
  }

  body.sv-operations-final-v1
  .category-actions,
  body.sv-operations-final-v1
  .order-actions{
    flex-wrap:wrap;
  }

}


/* ==========================================================
   SMALL MOBILE ≤ 420
   ========================================================== */

@media (max-width:420px){

  .sv-operations-status strong{
    display:none;
  }

  .sv-operations-command{
    font-size:10px;
  }

  .sv-operations-command span{
    font-size:14px;
  }

}


/* ==========================================================
   ACCESSIBILITY / MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

  body.sv-operations-final-v1 *,
  body.sv-operations-final-v1 *::before,
  body.sv-operations-final-v1 *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }

}

/* SERVELIO RESTAURANT OPERATIONS FINAL V1 CSS END */

/* SERVELIO LIVE ORDERS QUICKBAR SOURCE FINAL V1 CSS START */

#ordersView #svLiveOrdersApp > .sv-quickbar{
  position:sticky !important;
  top:8px !important;
  z-index:65 !important;

  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:7px !important;

  width:100% !important;
  max-width:none !important;

  margin:10px 0 14px !important;
  padding:8px !important;

  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;

  border:1px solid rgba(128,171,189,.15) !important;
  border-radius:14px !important;

  background:rgba(7,25,35,.95) !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.18) !important;

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

#ordersView #svLiveOrdersApp > .sv-quickbar > button{
  width:100% !important;
  min-width:0 !important;
  min-height:42px !important;

  margin:0 !important;
  padding:7px 10px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:10px !important;

  line-height:1.2 !important;
  font-size:11px !important;
  font-weight:800 !important;

  white-space:normal !important;
}

#ordersView #svLiveOrdersApp > .sv-quickbar > .sv-danger{
  background:#991f21 !important;
  border-color:rgba(255,100,100,.22) !important;
}


/* TABLET */
@media (min-width:761px) and (max-width:1200px){

  #ordersView #svLiveOrdersApp > .sv-quickbar{
    grid-template-columns:
      repeat(5,minmax(120px,1fr)) !important;

    overflow-x:auto !important;
  }

  #ordersView #svLiveOrdersApp > .sv-quickbar > button{
    min-height:46px !important;
  }
}


/* MOBILE */
@media (max-width:760px){

  #ordersView #svLiveOrdersApp > .sv-quickbar{
    display:flex !important;
    gap:7px !important;

    margin:8px 0 12px !important;
    padding:7px !important;

    overflow-x:auto !important;

    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  #ordersView #svLiveOrdersApp > .sv-quickbar > button{
    flex:0 0 150px !important;
    min-height:48px !important;

    scroll-snap-align:start;
  }
}

/* SERVELIO LIVE ORDERS QUICKBAR SOURCE FINAL V1 CSS END */


/* SERVELIO OPEN CLOSE REAL FINAL V1 CSS START */

#svRestaurantOperationalStatus.sv-operational-open{
  color:#74e7a6 !important;
  background:rgba(30,140,80,.16) !important;
  border-color:rgba(66,220,132,.18) !important;
}

#svRestaurantOperationalStatus.sv-operational-closed{
  color:#ff9198 !important;
  background:rgba(174,35,44,.18) !important;
  border-color:rgba(255,80,91,.22) !important;
}

#svRestaurantOpenCloseButton.sv-open-restaurant{
  background:#3bd58a !important;
  border-color:#59e39d !important;
  color:#062a1a !important;
}

#svRestaurantOpenCloseButton.sv-open-restaurant:hover{
  filter:brightness(1.05);
}

/* SERVELIO OPEN CLOSE REAL FINAL V1 CSS END */

/* SERVELIO RESERVATIONS PREMIUM DARK FINAL V1 START */

/*
 * Reservations only.
 * Functional JS / API / filters / reservation actions untouched.
 */

#reservationsView{
  color:#edf7fb !important;
}


/* ---------------------------------------------------------
   SUMMARY / STAT CARDS
--------------------------------------------------------- */

#reservationsView .stat-card,
#reservationsView .reservation-stat,
#reservationsView .reservation-stat-card,
#reservationsView .metric-card,
#reservationsView .summary-card,
#reservationsView [class*="reservation"][class*="stat"],
#reservationsView [class*="reservation"][class*="metric"]{
  background:
    linear-gradient(
      145deg,
      rgba(16,47,61,.98),
      rgba(8,31,42,.98)
    ) !important;

  border:
    1px solid rgba(116,166,185,.16) !important;

  color:#edf7fb !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.16) !important;
}


/* The four large cards visible directly below header */

#reservationsView > div > div[style*="background"],
#reservationsView .card{
  border-color:
    rgba(116,166,185,.16);
}


/* ---------------------------------------------------------
   FORCE WHITE SUMMARY SURFACES DARK
--------------------------------------------------------- */

#reservationsView [style*="background: white"],
#reservationsView [style*="background:white"],
#reservationsView [style*="background: #fff"],
#reservationsView [style*="background:#fff"],
#reservationsView [style*="background: rgb(255"],
#reservationsView [style*="background-color: white"],
#reservationsView [style*="background-color:white"]{
  background:#0d2a38 !important;
  color:#edf7fb !important;
}


/* ---------------------------------------------------------
   FILTER BAR
--------------------------------------------------------- */

#reservationsView .filters,
#reservationsView .filter-bar,
#reservationsView .reservation-filters,
#reservationsView [class*="filter"][class*="bar"]{
  background:#0d2836 !important;

  border:
    1px solid rgba(116,166,185,.16) !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.14) !important;
}


/* Search / select / date */

#reservationsView input,
#reservationsView select{
  background:#071f2b !important;

  color:#eef8fb !important;

  border:
    1px solid rgba(119,168,187,.20) !important;

  box-shadow:none !important;
}

#reservationsView input::placeholder{
  color:#7190a0 !important;
}

#reservationsView input:focus,
#reservationsView select:focus{
  border-color:
    rgba(23,207,194,.65) !important;

  outline:none !important;

  box-shadow:
    0 0 0 3px rgba(23,207,194,.09) !important;
}


/* ---------------------------------------------------------
   RESERVATION ROWS / CARDS
--------------------------------------------------------- */

#reservationsView .reservation-card,
#reservationsView .reservation-row,
#reservationsView .reservation-item,
#reservationsView [class*="reservation"][class*="card"],
#reservationsView [class*="reservation"][class*="row"],
#reservationsView [class*="reservation"][class*="item"]{
  background:
    linear-gradient(
      145deg,
      #102f3d,
      #0b2633
    ) !important;

  color:#edf7fb !important;

  border:
    1px solid rgba(116,166,185,.16) !important;

  box-shadow:
    0 10px 26px rgba(0,0,0,.15) !important;
}


/*
 * Catch the large white list surfaces without affecting
 * inputs/buttons.
 */

#reservationsView [style*="background:#fff"]:not(input):not(button):not(select),
#reservationsView [style*="background: #fff"]:not(input):not(button):not(select),
#reservationsView [style*="background:white"]:not(input):not(button):not(select),
#reservationsView [style*="background: white"]:not(input):not(button):not(select){
  background:#0d2937 !important;
}


/* ---------------------------------------------------------
   TYPOGRAPHY
--------------------------------------------------------- */

#reservationsView h1,
#reservationsView h2,
#reservationsView h3,
#reservationsView h4,
#reservationsView strong{
  color:#f2f8fa !important;
}

#reservationsView p,
#reservationsView label,
#reservationsView small{
  color:#9ab1bd;
}


/* Time */

#reservationsView [class*="time"]{
  color:#f2f8fa !important;
}


/* Customer name */

#reservationsView [class*="name"]{
  color:#eef7fa !important;
}


/* ---------------------------------------------------------
   STATUS
--------------------------------------------------------- */

#reservationsView [class*="status"]{
  font-weight:800;
}

#reservationsView .confirmed,
#reservationsView [class*="confirmed"]{
  color:#64dfa0 !important;
}


/* Servelio AI badge stays premium */

#reservationsView [class*="ai"]{
  border-color:
    rgba(24,207,194,.32) !important;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

#reservationsView button{
  border-color:
    rgba(121,168,186,.17);
}

#reservationsView button:not(.primary):not(.danger){
  background:#102b39;
  color:#eaf5f8;
}

#reservationsView button:hover{
  filter:brightness(1.06);
}


/* Filter clear button */

#reservationsView button[class*="clear"],
#reservationsView [class*="filter"] button{
  background:#132f3d !important;
  color:#dcebef !important;
}


/* ---------------------------------------------------------
   DIVIDERS
--------------------------------------------------------- */

#reservationsView hr{
  border-color:
    rgba(116,166,185,.12) !important;
}

#reservationsView [class*="divider"]{
  border-color:
    rgba(116,166,185,.12) !important;
}


/* ---------------------------------------------------------
   TABLE / LIST
--------------------------------------------------------- */

#reservationsView table{
  background:#0d2937 !important;
  color:#edf7fb !important;
}

#reservationsView th{
  background:#0a2330 !important;
  color:#8ca9b7 !important;
}

#reservationsView td{
  border-color:
    rgba(116,166,185,.12) !important;
  color:#edf7fb !important;
}


/* ---------------------------------------------------------
   DATE INPUT ICON
--------------------------------------------------------- */

#reservationsView input[type="date"]{
  color-scheme:dark;
}


/* ---------------------------------------------------------
   MOBILE / TABLET
--------------------------------------------------------- */

@media (max-width:1200px){

  #reservationsView .reservation-card,
  #reservationsView .reservation-row,
  #reservationsView .reservation-item{
    min-width:0 !important;
  }
}


@media (max-width:760px){

  #reservationsView input,
  #reservationsView select,
  #reservationsView button{
    min-height:46px;
  }

  #reservationsView .reservation-card,
  #reservationsView .reservation-row,
  #reservationsView .reservation-item{
    border-radius:16px !important;
  }
}

/* SERVELIO RESERVATIONS PREMIUM DARK FINAL V1 END */

/* SERVELIO RESERVATIONS REAL DARK FINAL V2 START */

/*
 * Reservation view only.
 * Final override intentionally sits at END of stylesheet.
 */

#reservationsView{
  --r-bg:#071b25;
  --r-surface:#0c2836;
  --r-surface2:#102f3e;
  --r-border:rgba(118,170,190,.17);
  --r-text:#eef8fb;
  --r-muted:#8ba6b4;
}


/* =========================================================
   DIRECT CONTENT SURFACES
   ========================================================= */

/*
 * The reservation page is dynamically rendered.
 * Its major direct wrappers are the summary,
 * filters and reservation list surfaces.
 */

#reservationsView > div:not([hidden]),
#reservationsView > section:not([hidden]){
  border-color:var(--r-border) !important;
}


/* =========================================================
   FOUR KPI CARDS
   Detect the row containing multiple direct DIV cards.
   ========================================================= */

#reservationsView div:has(> div:nth-child(4)):has(> div:first-child) > div{
  border-color:var(--r-border);
}


/*
 * Exact visual cards containing the KPI values.
 * :has(strong) catches the rendered summary cards regardless
 * of their generated class name.
 */

#reservationsView div:has(> strong),
#reservationsView div:has(> span + strong),
#reservationsView div:has(> div > strong){
  background-color:var(--r-surface) !important;
  border-color:var(--r-border) !important;
  color:var(--r-text) !important;
}


/* =========================================================
   FILTER CONTAINER
   This identifies the exact large wrapper by its controls.
   ========================================================= */

#reservationsView div:has(input):has(select),
#reservationsView div:has(input[type="date"]):has(button),
#reservationsView div:has(input[placeholder]):has(select):has(button){
  background:
    linear-gradient(
      145deg,
      #0c2937,
      #091f2b
    ) !important;

  border-color:var(--r-border) !important;
  color:var(--r-text) !important;
}


/* Controls */

#reservationsView input,
#reservationsView select{
  background:#061d28 !important;
  color:var(--r-text) !important;
  border:1px solid rgba(121,174,194,.22) !important;
}

#reservationsView input::placeholder{
  color:#7593a3 !important;
  opacity:1 !important;
}

#reservationsView select option{
  background:#071e29 !important;
  color:#eef8fb !important;
}

#reservationsView input[type="date"]{
  color-scheme:dark !important;
}


/* =========================================================
   RESERVATION LIST
   Rows are dynamically rendered and contain customer/guest/
   table/status information. Target list descendants rather
   than guessed legacy class names.
   ========================================================= */

#reservationsView div:has(> [class*="reservation"]),
#reservationsView article,
#reservationsView li{
  border-color:var(--r-border);
}


/*
 * Real visible rows are large rounded direct children in the
 * list area. Catch any reservation content surface containing
 * a button and several text blocks.
 */

#reservationsView div:has(> div + div + div):has(button){
  background:
    linear-gradient(
      145deg,
      #102f3d,
      #0a2633
    ) !important;

  color:var(--r-text) !important;
  border-color:var(--r-border) !important;
}


/* =========================================================
   WHITE BACKGROUND KILL SWITCH — RESERVATIONS ONLY
   Covers inline white surfaces used by the reservation
   renderer. Does NOT escape this view.
   ========================================================= */

#reservationsView [style*="background:#fff"],
#reservationsView [style*="background: #fff"],
#reservationsView [style*="background:#ffffff"],
#reservationsView [style*="background: #ffffff"],
#reservationsView [style*="background:white"],
#reservationsView [style*="background: white"],
#reservationsView [style*="background-color:#fff"],
#reservationsView [style*="background-color: #fff"],
#reservationsView [style*="background-color:white"],
#reservationsView [style*="background-color: white"]{
  background:#0c2937 !important;
  background-color:#0c2937 !important;
  color:var(--r-text) !important;
  border-color:var(--r-border) !important;
}


/* =========================================================
   TEXT — override dark-on-white legacy colors
   ========================================================= */

#reservationsView h1,
#reservationsView h2,
#reservationsView h3,
#reservationsView h4,
#reservationsView h5,
#reservationsView strong{
  color:var(--r-text) !important;
}

#reservationsView p,
#reservationsView small,
#reservationsView label{
  color:var(--r-muted);
}


/*
 * Legacy inline dark text colors can remain after the
 * background changes. Normalize text inside major surfaces.
 */

#reservationsView div:has(input):has(select) *,
#reservationsView div:has(> div + div + div):has(button) *{
  border-color:var(--r-border);
}


/* Keep semantic colors */

#reservationsView [class*="status"],
#reservationsView [class*="confirmed"]{
  color:#62dfa0 !important;
}


/* =========================================================
   FILTER CLEAR / ROW ACTION BUTTONS
   ========================================================= */

#reservationsView button{
  border-color:rgba(121,174,194,.18);
}

#reservationsView div:has(input):has(select) button{
  background:#102e3c !important;
  color:#eaf5f8 !important;
}


/* Arrow/action button inside reservation rows */

#reservationsView div:has(> div + div + div):has(button) > button{
  background:#0a2230 !important;
  color:#eaf5f8 !important;
}


/* =========================================================
   TABLE FALLBACK
   ========================================================= */

#reservationsView table,
#reservationsView tbody,
#reservationsView tr{
  background:#0c2937 !important;
  color:var(--r-text) !important;
}

#reservationsView th{
  background:#081f2b !important;
  color:var(--r-muted) !important;
}

#reservationsView td,
#reservationsView th{
  border-color:var(--r-border) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width:761px) and (max-width:1200px){

  #reservationsView input,
  #reservationsView select,
  #reservationsView button{
    min-height:46px;
  }
}

@media (max-width:760px){

  #reservationsView input,
  #reservationsView select,
  #reservationsView button{
    min-height:48px;
  }

  #reservationsView div:has(> div + div + div):has(button){
    border-radius:16px !important;
  }
}

/* SERVELIO RESERVATIONS REAL DARK FINAL V2 END */

/* SERVELIO RESERVATION ROW WHITE CLOSEOUT V1 START */

/*
 * FINAL reservation row surface closeout.
 * Reservation page only.
 * No JS / API / backend behavior changes.
 */


/* ---------------------------------------------------------
   COMPLETE RESERVATION ROW
--------------------------------------------------------- */

/*
 * A reservation row contains several information columns
 * plus its action button.
 *
 * Earlier patch darkened nested customer/time surfaces.
 * This rule darkens the ACTUAL parent row as well.
 */

#reservationsView div:has(> div + div + div):has(> button),
#reservationsView div:has(> div + div + div + div),
#reservationsView article:has(button){
    background:
      linear-gradient(
        145deg,
        #102f3d 0%,
        #0b2835 100%
      ) !important;

    background-color:#0d2b39 !important;

    color:#edf8fb !important;

    border-color:
      rgba(116,170,190,.17) !important;
}


/* ---------------------------------------------------------
   DIRECT CHILD CELLS
--------------------------------------------------------- */

#reservationsView div:has(> div + div + div):has(> button) > div,
#reservationsView div:has(> div + div + div + div) > div{
    background-color:transparent !important;
    color:#edf8fb !important;
}


/* ---------------------------------------------------------
   LEGACY WHITE CHILD SURFACES
--------------------------------------------------------- */

#reservationsView div:has(> div + div + div) div[style*="background"],
#reservationsView article div[style*="background"]{
    border-color:
      rgba(116,170,190,.14) !important;
}


/* ---------------------------------------------------------
   TEXT
--------------------------------------------------------- */

#reservationsView div:has(> div + div + div) strong,
#reservationsView div:has(> div + div + div) b{
    color:#f3fafc !important;
}


/* Guest / table labels */

#reservationsView div:has(> div + div + div) small,
#reservationsView div:has(> div + div + div) label{
    color:#7f9caa !important;
}


/* Normal text */

#reservationsView div:has(> div + div + div) p,
#reservationsView div:has(> div + div + div) span{
    border-color:
      rgba(116,170,190,.14);
}


/* ---------------------------------------------------------
   KEEP STATUS GREEN
--------------------------------------------------------- */

#reservationsView [class*="status"],
#reservationsView [class*="confirmed"],
#reservationsView [class*="approved"]{
    color:#54dda0 !important;
}


/* ---------------------------------------------------------
   SERVELIO AI BADGE
--------------------------------------------------------- */

#reservationsView [class*="ai"],
#reservationsView [class*="AI"]{
    background:
      rgba(18,199,181,.08) !important;

    border-color:
      rgba(18,199,181,.32) !important;
}


/* ---------------------------------------------------------
   RIGHT ARROW ACTION
--------------------------------------------------------- */

#reservationsView div:has(> div + div + div) > button,
#reservationsView article > button{
    background:#071f2b !important;

    color:#dff5f5 !important;

    border:
      1px solid rgba(116,170,190,.15) !important;

    box-shadow:none !important;
}

#reservationsView div:has(> div + div + div) > button:hover,
#reservationsView article > button:hover{
    background:#103847 !important;

    border-color:
      rgba(18,199,181,.32) !important;
}


/* ---------------------------------------------------------
   FINAL WHITE KILL — ONLY INSIDE RESERVATION LIST CONTENT
--------------------------------------------------------- */

#reservationsView div:has(> div + div + div)
  [style*="background-color: rgb(255, 255, 255)"],

#reservationsView div:has(> div + div + div)
  [style*="background: rgb(255, 255, 255)"],

#reservationsView div:has(> div + div + div)
  [style*="background-color:#fff"],

#reservationsView div:has(> div + div + div)
  [style*="background-color: #fff"],

#reservationsView div:has(> div + div + div)
  [style*="background:#fff"],

#reservationsView div:has(> div + div + div)
  [style*="background: #fff"]{

    background:#0d2b39 !important;
    background-color:#0d2b39 !important;

    color:#edf8fb !important;
}


/* ---------------------------------------------------------
   ROW DIVIDERS
--------------------------------------------------------- */

#reservationsView div:has(> div + div + div){
    --reservation-divider:
      rgba(116,170,190,.12);
}

#reservationsView div:has(> div + div + div) > div{
    border-color:
      var(--reservation-divider) !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width:760px){

    #reservationsView div:has(> div + div + div):has(> button),
    #reservationsView div:has(> div + div + div + div){
        border-radius:16px !important;
    }
}

/* SERVELIO RESERVATION ROW WHITE CLOSEOUT V1 END */

/* SERVELIO RESERVATION FINAL WHITE KILL V3 START */

/*
  Final visual closeout.
  Scope: reservationsView only.
  Backend / reservation logic untouched.
*/


/* =========================================================
   REAL RESERVATION ROW
   ========================================================= */

#reservationsView div:has(> div + div + div):has(button){
    background:#0b2936 !important;
    background-color:#0b2936 !important;
    color:#edf8fb !important;

    border:
      1px solid rgba(116,170,190,.16) !important;

    box-shadow:
      0 8px 24px rgba(0,0,0,.10) !important;
}


/* =========================================================
   REMOVE WHITE FROM EVERY INTERNAL ROW CELL
   ========================================================= */

#reservationsView div:has(> div + div + div):has(button) > div,
#reservationsView div:has(> div + div + div):has(button) > div > div,
#reservationsView div:has(> div + div + div):has(button) > div > div > div{

    background:#0b2936 !important;
    background-color:#0b2936 !important;

    color:#edf8fb !important;

    border-color:
      rgba(116,170,190,.12) !important;
}


/* =========================================================
   CUSTOMER / TIME BLOCKS
   ========================================================= */

#reservationsView div:has(> div + div + div):has(button)
  > div:first-child,

#reservationsView div:has(> div + div + div):has(button)
  > div:nth-child(2){

    background:#0a2b39 !important;
    background-color:#0a2b39 !important;
}


/* =========================================================
   GUEST / TABLE / STATUS AREA
   ========================================================= */

#reservationsView div:has(> div + div + div):has(button)
  > div:nth-child(n+3){

    background:#0b2936 !important;
    background-color:#0b2936 !important;
}


/* =========================================================
   TEXT
   ========================================================= */

#reservationsView div:has(> div + div + div):has(button) strong,
#reservationsView div:has(> div + div + div):has(button) b{
    color:#f4fafc !important;
}

#reservationsView div:has(> div + div + div):has(button) p,
#reservationsView div:has(> div + div + div):has(button) small,
#reservationsView div:has(> div + div + div):has(button) label{
    color:#8da8b5 !important;
}


/* =========================================================
   SERVELIO AI BADGE
   Restore badge after cell cleanup.
   ========================================================= */

#reservationsView [class*="ai"],
#reservationsView [class*="AI"]{
    background:rgba(20,210,191,.09) !important;
    background-color:rgba(20,210,191,.09) !important;

    color:#43dfc9 !important;

    border:
      1px solid rgba(20,210,191,.35) !important;
}


/* =========================================================
   CONFIRMED STATUS
   ========================================================= */

#reservationsView [class*="status"],
#reservationsView [class*="confirmed"],
#reservationsView [class*="approved"]{
    color:#50dfa0 !important;
}


/* =========================================================
   RIGHT ARROW BUTTON
   ========================================================= */

#reservationsView div:has(> div + div + div):has(button) > button{

    background:#071f2b !important;
    background-color:#071f2b !important;

    color:#dff6f5 !important;

    border:
      1px solid rgba(116,170,190,.17) !important;

    box-shadow:none !important;
}

#reservationsView div:has(> div + div + div):has(button) > button:hover{

    background:#103947 !important;
    background-color:#103947 !important;

    border-color:
      rgba(20,210,191,.32) !important;
}


/* =========================================================
   LAST RESORT:
   any DIV inside an actual reservation row carrying a
   white computed legacy class gets overridden here.
   Buttons / inputs / badges remain separately controlled.
   ========================================================= */

#reservationsView
div:has(> div + div + div):has(button)
div:not(:has(input)):not(:has(select)):not(:has(textarea)){

    border-color:
      rgba(116,170,190,.12);
}


/* Desktop */

@media (min-width:1201px){

    #reservationsView
    div:has(> div + div + div):has(button){
        border-radius:17px !important;
    }
}


/* Tablet */

@media (min-width:761px) and (max-width:1200px){

    #reservationsView
    div:has(> div + div + div):has(button){
        border-radius:16px !important;
    }
}


/* Mobile */

@media (max-width:760px){

    #reservationsView
    div:has(> div + div + div):has(button){
        border-radius:15px !important;
    }
}

/* SERVELIO RESERVATION FINAL WHITE KILL V3 END */

/* SERVELIO RESERVATIONS FINAL V5 START */

:root{
  --rv-bg:#061923;
  --rv-card:#0a2937;
  --rv-card2:#0d3040;
  --rv-line:rgba(137,185,202,.17);
  --rv-text:#f4fbfd;
  --rv-muted:#8da8b6;
  --rv-teal:#18d1bf;
}


/* =========================================================
   RESERVATION LIST
   ========================================================= */

#reservationsView{
  color:var(--rv-text);
}


/*
 * Reservation row.
 * Force the complete row and every DIRECT information cell
 * onto the same dark surface.
 */

#reservationsView
div:has(> div + div + div):has(> button){
  background:#0a2937 !important;
  background-color:#0a2937 !important;
  color:var(--rv-text) !important;
  border:1px solid var(--rv-line) !important;
}


/* Every direct column */

#reservationsView
div:has(> div + div + div):has(> button)
> div{
  background:#0a2937 !important;
  background-color:#0a2937 !important;
  color:var(--rv-text) !important;
  border-color:var(--rv-line) !important;
}


/* First/time column */

#reservationsView
div:has(> div + div + div):has(> button)
> div:first-child{
  background:#082532 !important;
  background-color:#082532 !important;
}


/* Customer column */

#reservationsView
div:has(> div + div + div):has(> button)
> div:nth-child(2){
  background:#092b39 !important;
  background-color:#092b39 !important;
}


/* Remaining right-side columns */

#reservationsView
div:has(> div + div + div):has(> button)
> div:nth-child(n+3){
  background:#0a2937 !important;
  background-color:#0a2937 !important;
}


/* Right-side nested wrappers */

#reservationsView
div:has(> div + div + div):has(> button)
> div:nth-child(n+3)
> div{
  background:transparent !important;
  background-color:transparent !important;
}


/* Main values */

#reservationsView
div:has(> div + div + div):has(> button)
strong,

#reservationsView
div:has(> div + div + div):has(> button)
b{
  color:#f4fbfd !important;
}


/* Labels */

#reservationsView
div:has(> div + div + div):has(> button)
small{
  color:#8da8b6 !important;
}


/* Action arrow */

#reservationsView
div:has(> div + div + div):has(> button)
> button{
  background:#071f2a !important;
  background-color:#071f2a !important;
  color:#eaf7f9 !important;
  border:1px solid var(--rv-line) !important;
  box-shadow:none !important;
}

#reservationsView
div:has(> div + div + div):has(> button)
> button:hover{
  background:#103746 !important;
  background-color:#103746 !important;
}


/* =========================================================
   RESERVATION DETAIL DRAWER
   ========================================================= */

[class*="reservation-detail"],
[class*="reservationDetail"],
[class*="reservation"][class*="drawer"]{
  background:#061923 !important;
  background-color:#061923 !important;
  color:var(--rv-text) !important;
  border-color:var(--rv-line) !important;
}


/*
 * Drawer header.
 */

[class*="reservation-detail"]
> div:first-child,

[class*="reservationDetail"]
> div:first-child,

[class*="reservation"][class*="drawer"]
> div:first-child{
  background:#082532 !important;
  background-color:#082532 !important;
  color:#f4fbfd !important;
  border-color:var(--rv-line) !important;
}


/* Header text */

[class*="reservation-detail"] h1,
[class*="reservation-detail"] h2,
[class*="reservation-detail"] h3,

[class*="reservationDetail"] h1,
[class*="reservationDetail"] h2,
[class*="reservationDetail"] h3,

[class*="reservation"][class*="drawer"] h1,
[class*="reservation"][class*="drawer"] h2,
[class*="reservation"][class*="drawer"] h3{
  color:#f4fbfd !important;
}


/*
 * Status / Servelio AI top card.
 */

[class*="reservation-detail"]
div:has([class*="ai"]):has([class*="status"]),

[class*="reservationDetail"]
div:has([class*="ai"]):has([class*="status"]),

[class*="reservation"][class*="drawer"]
div:has([class*="ai"]):has([class*="status"]){
  background:#0a2937 !important;
  background-color:#0a2937 !important;
  color:var(--rv-text) !important;
  border-color:var(--rv-line) !important;
}


/*
 * Detail information cards.
 */

[class*="reservation-detail"]
div:has(> strong),

[class*="reservationDetail"]
div:has(> strong),

[class*="reservation"][class*="drawer"]
div:has(> strong){
  background:#0a2937 !important;
  background-color:#0a2937 !important;
  color:#f4fbfd !important;
  border-color:var(--rv-line) !important;
}


/* Drawer values */

[class*="reservation-detail"] strong,
[class*="reservationDetail"] strong,
[class*="reservation"][class*="drawer"] strong{
  color:#f4fbfd !important;
}


/* Drawer labels */

[class*="reservation-detail"] small,
[class*="reservation-detail"] label,

[class*="reservationDetail"] small,
[class*="reservationDetail"] label,

[class*="reservation"][class*="drawer"] small,
[class*="reservation"][class*="drawer"] label{
  color:#8da8b6 !important;
}


/* Close button */

[class*="reservation-detail"] button:first-of-type,
[class*="reservationDetail"] button:first-of-type,
[class*="reservation"][class*="drawer"] button:first-of-type{
  background:#0c3040 !important;
  background-color:#0c3040 !important;
  color:#f4fbfd !important;
  border:1px solid var(--rv-line) !important;
}


/* =========================================================
   FIXED DRAWER FALLBACK
   ========================================================= */

body
div[style*="position: fixed"]:has(a[href^="tel:"]),

body
div[style*="position:fixed"]:has(a[href^="tel:"]),

body
aside:has(a[href^="tel:"]),

body
div[role="dialog"]:has(a[href^="tel:"]){
  background:#061923 !important;
  background-color:#061923 !important;
  color:#f4fbfd !important;
  border-color:var(--rv-line) !important;
}


/* Fixed drawer header */

body
div[style*="position: fixed"]:has(a[href^="tel:"])
> div:first-child,

body
div[style*="position:fixed"]:has(a[href^="tel:"])
> div:first-child,

body
aside:has(a[href^="tel:"])
> div:first-child,

body
div[role="dialog"]:has(a[href^="tel:"])
> div:first-child{
  background:#082532 !important;
  background-color:#082532 !important;
  color:#f4fbfd !important;
  border-color:var(--rv-line) !important;
}


/* All drawer cards */

body
div[style*="position: fixed"]:has(a[href^="tel:"])
div:has(> strong),

body
div[style*="position:fixed"]:has(a[href^="tel:"])
div:has(> strong),

body
aside:has(a[href^="tel:"])
div:has(> strong),

body
div[role="dialog"]:has(a[href^="tel:"])
div:has(> strong){
  background:#0a2937 !important;
  background-color:#0a2937 !important;
  color:#f4fbfd !important;
  border-color:var(--rv-line) !important;
}


/* Drawer title/value */

body
div[style*="position: fixed"]:has(a[href^="tel:"]) h1,
body
div[style*="position: fixed"]:has(a[href^="tel:"]) h2,
body
div[style*="position: fixed"]:has(a[href^="tel:"]) h3,
body
div[style*="position: fixed"]:has(a[href^="tel:"]) strong,

body
aside:has(a[href^="tel:"]) h1,
body
aside:has(a[href^="tel:"]) h2,
body
aside:has(a[href^="tel:"]) h3,
body
aside:has(a[href^="tel:"]) strong{
  color:#f4fbfd !important;
}


/* Phone button */

body
div[style*="position: fixed"]:has(a[href^="tel:"])
a[href^="tel:"],

body
div[style*="position:fixed"]:has(a[href^="tel:"])
a[href^="tel:"],

body
aside:has(a[href^="tel:"])
a[href^="tel:"],

body
div[role="dialog"]:has(a[href^="tel:"])
a[href^="tel:"]{
  background:#0d3444 !important;
  background-color:#0d3444 !important;
  color:#ffffff !important;
  border:1px solid rgba(24,209,191,.22) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width:1201px){

  #reservationsView
  div:has(> div + div + div):has(> button){
    border-radius:17px !important;
  }

}


@media (min-width:761px) and (max-width:1200px){

  #reservationsView
  div:has(> div + div + div):has(> button){
    border-radius:16px !important;
  }

}


@media (max-width:760px){

  #reservationsView
  div:has(> div + div + div):has(> button){
    border-radius:15px !important;
  }

  [class*="reservation-detail"],
  [class*="reservationDetail"],
  [class*="reservation"][class*="drawer"]{
    width:100% !important;
    max-width:100% !important;
  }

}

/* SERVELIO RESERVATIONS FINAL V5 END */

/* SERVELIO RESERVATION LIST RIGHT FINAL V6 START */

/*
  ONLY RESERVATION LIST.
  DETAIL DRAWER IS NOT TOUCHED.
*/


/* =========================================================
   COMPLETE RESERVATION CARD
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child){

    background:#0a2937 !important;
    background-color:#0a2937 !important;

    color:#f4fbfd !important;

    border-color:
      rgba(137,185,202,.17) !important;
}


/* =========================================================
   DIRECT CELLS
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div{

    background:#0a2937 !important;
    background-color:#0a2937 !important;

    color:#f4fbfd !important;

    border-color:
      rgba(137,185,202,.14) !important;
}


/* =========================================================
   TIME
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div:first-child{

    background:#082532 !important;
    background-color:#082532 !important;
}


/* =========================================================
   CUSTOMER
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div:nth-child(2){

    background:#092b39 !important;
    background-color:#092b39 !important;
}


/* =========================================================
   RIGHT SIDE
   Guest / Table / AI / Status
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div:nth-child(3),

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div:nth-child(4),

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div:nth-child(5),

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div:nth-child(6){

    background:#0a2937 !important;
    background-color:#0a2937 !important;

    color:#f4fbfd !important;
}


/* Nested wrappers on right */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div:nth-child(n+3)
> div{

    background:transparent !important;
    background-color:transparent !important;

    color:#f4fbfd !important;
}


/* =========================================================
   REMOVE REMAINING WHITE BACKGROUNDS
   ONLY INSIDE RESERVATION ROW RIGHT SIDE
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div:nth-child(n+3)
div:not([class*="badge"]){

    background-color:transparent !important;
}


/* =========================================================
   LABELS
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div:nth-child(n+3)
small,

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> div:nth-child(n+3)
label{

    color:#8da8b6 !important;
}


/* =========================================================
   VALUES
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
strong,

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
b{

    color:#f4fbfd !important;
}


/* =========================================================
   SERVELIO AI BADGE
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
[class*="ai"]{

    background:
      rgba(24,209,191,.08) !important;

    background-color:
      rgba(24,209,191,.08) !important;

    color:#32ddca !important;

    border:
      1px solid rgba(24,209,191,.38) !important;
}


/* =========================================================
   CONFIRMED STATUS
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
[class*="confirmed"],

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
[class*="approved"]{

    color:#50dfa0 !important;
}


/* =========================================================
   ARROW BUTTON
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> button:last-child{

    background:#071f2a !important;
    background-color:#071f2a !important;

    color:#eaf7f9 !important;

    border:
      1px solid rgba(137,185,202,.17) !important;

    box-shadow:none !important;
}


#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child)
> button:last-child:hover{

    background:#103746 !important;
    background-color:#103746 !important;

    border-color:
      rgba(24,209,191,.35) !important;
}


/* =========================================================
   ROUNDING
   ========================================================= */

#reservationsView
div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
:has(> button:last-child){

    border-radius:17px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width:761px) and (max-width:1200px){

    #reservationsView
    div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
    :has(> button:last-child){

        border-radius:16px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px){

    #reservationsView
    div:has(> div:first-child + div:nth-child(2) + div:nth-child(3))
    :has(> button:last-child){

        border-radius:15px !important;
    }
}

/* SERVELIO RESERVATION LIST RIGHT FINAL V6 END */

/* SERVELIO CATEGORIES RESPONSIVE PREMIUM FINAL V1 START */

/* =========================================================
   SERVELIO CATEGORIES
   DESKTOP + TABLET + MOBILE
   ========================================================= */

#categoriesView{
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}


/* =========================================================
   MAIN PANEL
   ========================================================= */

#categoriesView.panel{
  width:100% !important;
  min-width:0 !important;

  border:
    1px solid rgba(99,154,176,.20) !important;

  border-radius:20px !important;

  background:
    linear-gradient(
      180deg,
      #0b2532 0%,
      #09212d 100%
    ) !important;

  box-shadow:
    0 16px 40px rgba(0,0,0,.16) !important;

  overflow:hidden !important;
}


/* =========================================================
   HEADER
   ========================================================= */

#categoriesView .panel-head,
#categoriesView .categories-head{
  background:transparent !important;
}

#categoriesView .panel-head{
  padding:20px !important;

  border-bottom:
    1px solid rgba(110,164,184,.16) !important;
}

#categoriesView .categories-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  width:100% !important;
  min-width:0 !important;

  gap:16px !important;
}

#categoriesView .categories-head > div{
  min-width:0 !important;
}

#categoriesView .categories-head h3{
  margin:0 0 5px !important;

  color:#f8fafc !important;

  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
}

#categoriesView .categories-head .muted{
  color:#7f9dab !important;
}


/* =========================================================
   NEW CATEGORY BUTTON
   ========================================================= */

#categoriesView #newCategoryBtn,
#categoriesView .primary-small{
  min-height:42px !important;

  padding:0 17px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:
    1px solid rgba(45,212,191,.40) !important;

  border-radius:11px !important;

  background:
    linear-gradient(
      135deg,
      #20d5c2,
      #13bfae
    ) !important;

  color:#031a22 !important;

  font-size:13px !important;
  font-weight:950 !important;

  box-shadow:
    0 8px 22px rgba(20,184,166,.13) !important;

  white-space:nowrap !important;
}

#categoriesView #newCategoryBtn:hover,
#categoriesView .primary-small:hover{
  transform:translateY(-1px);

  filter:brightness(1.05);
}


/* =========================================================
   FORM
   ========================================================= */

#categoriesView .category-form-wrap{
  padding:18px 20px !important;

  border-bottom:
    1px solid rgba(110,164,184,.16) !important;

  background:
    rgba(3,20,28,.20) !important;
}

#categoriesView .category-form{
  display:grid !important;

  grid-template-columns:
    minmax(0,2fr)
    minmax(130px,.7fr)
    auto !important;

  gap:14px !important;

  align-items:end !important;
}

#categoriesView .category-form > *{
  min-width:0 !important;
}

#categoriesView .category-form label{
  color:#a9c0ca !important;
}

#categoriesView .category-form input,
#categoriesView .category-form select{
  width:100% !important;

  min-height:44px !important;

  border:
    1px solid rgba(105,157,178,.28) !important;

  border-radius:11px !important;

  background:#071f2a !important;

  color:#f8fafc !important;

  outline:none !important;
}

#categoriesView .category-form input:focus,
#categoriesView .category-form select:focus{
  border-color:
    rgba(45,212,191,.70) !important;

  box-shadow:
    0 0 0 3px rgba(45,212,191,.08) !important;
}

#categoriesView .category-actions{
  display:flex !important;
  align-items:center !important;

  gap:8px !important;
}

#categoriesView .category-actions button{
  min-height:44px !important;
}


/* =========================================================
   CATEGORY TABLE CONTAINER
   ========================================================= */

#categoriesView .categories-table{
  width:100% !important;
  min-width:0 !important;

  padding:
    0 20px 20px !important;

  overflow:visible !important;
}


/* =========================================================
   DESKTOP CATEGORY ROW
   ========================================================= */

#categoriesView .category-row{
  width:100% !important;
  min-width:0 !important;

  display:grid !important;

  grid-template-columns:
    minmax(220px,2fr)
    minmax(90px,.7fr)
    minmax(90px,.7fr)
    minmax(190px,1fr) !important;

  gap:18px !important;

  align-items:center !important;

  padding:
    17px 0 !important;

  border-bottom:
    1px solid rgba(110,164,184,.15) !important;

  color:#eaf4f7 !important;

  background:transparent !important;
}

#categoriesView .category-row:last-child{
  border-bottom:0 !important;
}

#categoriesView .category-row > *{
  min-width:0 !important;
}


/* =========================================================
   CATEGORY NAME
   ========================================================= */

#categoriesView .category-row strong{
  display:block !important;

  overflow:hidden !important;

  color:#ffffff !important;

  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:900 !important;

  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#categoriesView .category-row .muted{
  margin-top:3px !important;

  overflow:hidden !important;

  color:#6f94a4 !important;

  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


/* =========================================================
   ACTIVE BADGE
   ========================================================= */

#categoriesView .category-row .badge{
  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  min-height:27px !important;

  padding:
    5px 10px !important;

  border:
    1px solid rgba(52,211,153,.24) !important;

  border-radius:999px !important;

  background:
    rgba(52,211,153,.12) !important;

  color:#71e7ad !important;

  font-size:11px !important;
  font-weight:900 !important;
}

#categoriesView .category-row .badge-off{
  border-color:
    rgba(148,163,184,.18) !important;

  background:
    rgba(148,163,184,.09) !important;

  color:#a7bac3 !important;
}


/* =========================================================
   ACTIONS
   ========================================================= */

#categoriesView .category-row-actions{
  display:flex !important;

  justify-content:flex-end !important;
  align-items:center !important;

  gap:8px !important;

  min-width:0 !important;
}

#categoriesView .category-row-actions button{
  min-height:39px !important;

  padding:
    0 14px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  border-radius:9px !important;

  font-size:12px !important;
  font-weight:900 !important;

  white-space:nowrap !important;

  transition:
    transform .15s ease,
    filter .15s ease,
    background .15s ease !important;
}

#categoriesView .category-row-actions button:hover{
  transform:translateY(-1px);
}


/* PASIF */

#categoriesView .category-row-actions .status-btn{
  border:
    1px solid rgba(129,140,248,.25) !important;

  background:
    rgba(99,102,241,.12) !important;

  color:#c7d2fe !important;
}

#categoriesView .category-row-actions .status-btn:hover{
  background:
    rgba(99,102,241,.20) !important;
}


/* DELETE */

#categoriesView .category-row-actions .delete-btn{
  border:
    1px solid rgba(248,113,113,.24) !important;

  background:
    rgba(239,68,68,.11) !important;

  color:#fca5a5 !important;
}

#categoriesView .category-row-actions .delete-btn:hover{
  background:
    rgba(239,68,68,.18) !important;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

#categoriesView .empty-state{
  margin-top:20px !important;

  padding:35px 20px !important;

  border:
    1px dashed rgba(107,158,178,.28) !important;

  border-radius:15px !important;

  background:
    rgba(6,29,39,.45) !important;

  color:#88a6b3 !important;

  text-align:center !important;
}


/* =========================================================
   DESKTOP >= 1201
   ========================================================= */

@media (min-width:1201px){

  #categoriesView .category-row{
    min-height:68px !important;
  }

}


/* =========================================================
   TABLET 761 - 1200
   ========================================================= */

@media (min-width:761px) and (max-width:1200px){

  #categoriesView.panel{
    border-radius:17px !important;
  }

  #categoriesView .panel-head{
    padding:17px !important;
  }

  #categoriesView .categories-table{
    padding:
      0 17px 17px !important;
  }

  #categoriesView .category-row{
    grid-template-columns:
      minmax(170px,1.6fr)
      minmax(72px,.55fr)
      minmax(76px,.65fr)
      minmax(165px,1fr) !important;

    gap:11px !important;

    padding:
      15px 0 !important;
  }

  #categoriesView .category-row strong{
    font-size:14px !important;
  }

  #categoriesView .category-row-actions{
    gap:6px !important;
  }

  #categoriesView .category-row-actions button{
    min-height:38px !important;

    padding:
      0 10px !important;

    font-size:11px !important;
  }

  #categoriesView .category-form{
    grid-template-columns:
      minmax(0,1fr)
      130px !important;
  }

  #categoriesView .category-actions{
    grid-column:
      1 / -1 !important;

    justify-content:flex-end !important;
  }

}


/* =========================================================
   MOBILE <= 760
   ========================================================= */

@media (max-width:760px){

  /* Never allow horizontal overflow */

  html,
  body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  #categoriesView{
    width:100% !important;
    max-width:100% !important;

    overflow:hidden !important;
  }

  #categoriesView.panel{
    border-radius:15px !important;
  }


  /* HEADER */

  #categoriesView .panel-head{
    padding:
      14px !important;
  }

  #categoriesView .categories-head{
    flex-direction:column !important;

    align-items:stretch !important;

    gap:12px !important;
  }

  #categoriesView .categories-head h3{
    font-size:18px !important;
  }

  #categoriesView #newCategoryBtn,
  #categoriesView .primary-small{
    width:100% !important;

    min-height:46px !important;
  }


  /* FORM */

  #categoriesView .category-form-wrap{
    padding:14px !important;
  }

  #categoriesView .category-form{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    gap:11px !important;
  }

  #categoriesView .category-actions{
    display:grid !important;

    grid-template-columns:
      1fr 1fr !important;

    width:100% !important;

    gap:8px !important;
  }

  #categoriesView .category-actions button{
    width:100% !important;
  }


  /* LIST */

  #categoriesView .categories-table{
    display:flex !important;

    flex-direction:column !important;

    gap:10px !important;

    padding:
      12px !important;
  }


  /*
    Mobile is not a compressed desktop table.
    Every category becomes a touch-friendly card.
  */

  #categoriesView .category-row{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    grid-template-areas:
      "name status"
      "sort sort"
      "actions actions" !important;

    gap:
      11px 12px !important;

    width:100% !important;

    padding:
      15px !important;

    border:
      1px solid rgba(101,156,177,.19) !important;

    border-radius:
      14px !important;

    background:
      linear-gradient(
        145deg,
        #0b2a37,
        #08232f
      ) !important;

    box-shadow:
      0 8px 22px rgba(0,0,0,.12) !important;
  }


  /* Name */

  #categoriesView .category-row > div:nth-child(1){
    grid-area:name !important;

    min-width:0 !important;
  }


  /* Sort */

  #categoriesView .category-row > div:nth-child(2){
    grid-area:sort !important;

    width:max-content !important;

    max-width:100% !important;

    padding:
      5px 9px !important;

    border-radius:
      8px !important;

    background:
      rgba(92,138,157,.10) !important;

    color:#9cb7c3 !important;

    font-size:11px !important;
    font-weight:800 !important;
  }


  /* Status */

  #categoriesView .category-row > div:nth-child(3){
    grid-area:status !important;

    justify-self:end !important;

    align-self:start !important;
  }


  /* Actions */

  #categoriesView .category-row > div:nth-child(4),
  #categoriesView .category-row-actions{
    grid-area:actions !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(76px,.42fr) !important;

    width:100% !important;

    gap:8px !important;

    justify-content:stretch !important;
  }

  #categoriesView .category-row-actions button{
    width:100% !important;

    min-height:
      44px !important;

    padding:
      0 10px !important;
  }


  /* Text */

  #categoriesView .category-row strong{
    font-size:15px !important;
  }

  #categoriesView .category-row .muted{
    font-size:11px !important;
  }


  /* Badge */

  #categoriesView .category-row .badge{
    min-height:25px !important;

    padding:
      4px 8px !important;

    font-size:10px !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE <= 420
   ========================================================= */

@media (max-width:420px){

  #categoriesView .categories-table{
    padding:
      10px !important;
  }

  #categoriesView .category-row{
    padding:
      13px !important;
  }

  #categoriesView .category-row-actions{
    grid-template-columns:
      1fr !important;
  }

  #categoriesView .category-row-actions button{
    min-height:
      44px !important;
  }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover:none) and (pointer:coarse){

  #categoriesView button{
    min-height:
      44px;
  }

  #categoriesView .category-row:hover{
    transform:none !important;
  }

}


/* SERVELIO CATEGORIES RESPONSIVE PREMIUM FINAL V1 END */

/* SERVELIO PERSONNEL PREMIUM RESPONSIVE FINAL V1 START */

/* =========================================================
   PERSONNEL — SAME VISUAL LANGUAGE AS CATEGORIES
   ========================================================= */

#personnelView{
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  color:#dbe9ee !important;
}

/* MAIN PANEL */

#personnelView.panel{
  width:100% !important;
  min-width:0 !important;

  border:1px solid rgba(99,154,176,.20) !important;
  border-radius:20px !important;

  background:
    linear-gradient(
      180deg,
      #0b2532 0%,
      #09212d 100%
    ) !important;

  box-shadow:
    0 16px 40px rgba(0,0,0,.16) !important;

  overflow:hidden !important;
}

/* HEADER */

#personnelView .panel-head{
  padding:20px !important;

  border-bottom:
    1px solid rgba(110,164,184,.16) !important;

  background:transparent !important;
}

#personnelView .panel-head h3{
  color:#f2f7f9 !important;
  font-weight:900 !important;
}

/* NEW PERSONNEL */

#personnelView #newPersonnelBtn,
#personnelView .primary-small{
  min-height:42px !important;

  padding:0 17px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid rgba(45,212,191,.40) !important;
  border-radius:11px !important;

  background:
    linear-gradient(
      135deg,
      #20d5c2,
      #13bfae
    ) !important;

  color:#031a22 !important;

  font-size:13px !important;
  font-weight:950 !important;

  box-shadow:
    0 8px 22px rgba(20,184,166,.13) !important;

  white-space:nowrap !important;
}

#personnelView #newPersonnelBtn:hover,
#personnelView .primary-small:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

/* =========================================================
   PERSONNEL LIST
   ========================================================= */

#personnelView #personnelTable{
  width:100% !important;
  min-width:0 !important;

  padding:0 20px 20px !important;

  overflow:visible !important;
}

/* EXACT REAL ROW */

#personnelView .personnel-row{
  display:grid !important;

  grid-template-columns:
    52px
    minmax(220px,2fr)
    minmax(120px,.8fr)
    minmax(90px,.65fr)
    minmax(220px,1fr) !important;

  gap:18px !important;

  width:100% !important;
  min-width:0 !important;

  align-items:center !important;

  padding:17px 0 !important;

  border-bottom:
    1px solid rgba(110,164,184,.15) !important;

  background:transparent !important;

  color:#dbe9ee !important;
}

#personnelView .personnel-row:last-child{
  border-bottom:0 !important;
}

#personnelView .personnel-row > *{
  min-width:0 !important;
}

/* =========================================================
   AVATAR
   ========================================================= */

#personnelView .personnel-avatar{
  width:44px !important;
  height:44px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:
    1px solid rgba(45,212,191,.20) !important;

  border-radius:13px !important;

  background:
    linear-gradient(
      145deg,
      rgba(45,212,191,.14),
      rgba(44,119,142,.13)
    ) !important;

  color:#68dfd0 !important;

  font-size:15px !important;
  font-weight:950 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* =========================================================
   PERSON
   ========================================================= */

#personnelView .personnel-person{
  min-width:0 !important;
}

#personnelView .personnel-person strong{
  display:block !important;

  margin-bottom:4px !important;

  overflow:hidden !important;

  color:#f5f9fa !important;

  font-size:15px !important;
  line-height:1.25 !important;
  font-weight:900 !important;

  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#personnelView .personnel-person .muted{
  color:#7399a8 !important;

  font-size:12px !important;
  line-height:1.45 !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* =========================================================
   ROLE
   ========================================================= */

#personnelView .personnel-role{
  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  min-height:29px !important;

  padding:5px 11px !important;

  border:
    1px solid rgba(245,190,76,.20) !important;

  border-radius:999px !important;

  background:
    rgba(245,190,76,.10) !important;

  color:#e9c879 !important;

  font-size:11px !important;
  font-weight:900 !important;

  white-space:nowrap !important;
}

/* Manager/admin */

#personnelView .personnel-role.role-manager,
#personnelView .personnel-role.role-admin,
#personnelView .personnel-role.role-owner{
  border-color:
    rgba(45,212,191,.20) !important;

  background:
    rgba(45,212,191,.09) !important;

  color:#66dccc !important;
}

/* =========================================================
   ACTIVE / PASSIVE
   ========================================================= */

#personnelView .badge{
  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  min-height:27px !important;

  padding:5px 10px !important;

  border:
    1px solid rgba(52,211,153,.22) !important;

  border-radius:999px !important;

  background:
    rgba(52,211,153,.10) !important;

  color:#6fd9a5 !important;

  font-size:11px !important;
  font-weight:900 !important;
}

#personnelView .badge.badge-off{
  border-color:
    rgba(148,163,184,.17) !important;

  background:
    rgba(148,163,184,.08) !important;

  color:#91aab5 !important;
}

/* =========================================================
   ACTIONS
   ========================================================= */

#personnelView .personnel-actions{
  display:flex !important;

  align-items:center !important;
  justify-content:flex-end !important;

  gap:8px !important;

  min-width:0 !important;
}

#personnelView .personnel-actions button{
  min-height:39px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 14px !important;

  border-radius:9px !important;

  font-size:12px !important;
  font-weight:900 !important;

  white-space:nowrap !important;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease !important;
}

#personnelView .personnel-actions button:hover{
  transform:translateY(-1px);
}

/* PASIF */

#personnelView .personnel-actions .status-btn{
  border:
    1px solid rgba(129,140,248,.20) !important;

  background:
    rgba(99,102,241,.09) !important;

  color:#b9c5f6 !important;
}

#personnelView .personnel-actions .status-btn:hover{
  background:
    rgba(99,102,241,.16) !important;
}

/* PASSWORD */

#personnelView .personnel-actions .edit-btn{
  border:
    1px solid rgba(96,165,250,.20) !important;

  background:
    rgba(59,130,246,.09) !important;

  color:#a9c8ef !important;
}

#personnelView .personnel-actions .edit-btn:hover{
  background:
    rgba(59,130,246,.16) !important;
}

/* =========================================================
   PERSONNEL FORM
   ========================================================= */

#personnelView .personnel-form-wrap,
#personnelView [id*="personnelFormWrap"]{
  padding:18px 20px !important;

  border-bottom:
    1px solid rgba(110,164,184,.16) !important;

  background:
    rgba(3,20,28,.20) !important;
}

#personnelView form{
  min-width:0 !important;
}

#personnelView form label{
  color:#9db7c2 !important;
}

#personnelView form input,
#personnelView form select{
  max-width:100% !important;

  min-height:44px !important;

  border:
    1px solid rgba(105,157,178,.27) !important;

  border-radius:11px !important;

  background:#071f2a !important;

  color:#eaf3f6 !important;

  outline:none !important;
}

#personnelView form input::placeholder{
  color:#648997 !important;
}

#personnelView form input:focus,
#personnelView form select:focus{
  border-color:
    rgba(45,212,191,.55) !important;

  box-shadow:
    0 0 0 3px rgba(45,212,191,.07) !important;
}

/* =========================================================
   EMPTY / ERROR
   ========================================================= */

#personnelView .empty-state{
  margin-top:20px !important;

  padding:35px 20px !important;

  border:
    1px dashed rgba(107,158,178,.25) !important;

  border-radius:15px !important;

  background:
    rgba(6,29,39,.42) !important;

  color:#809eaa !important;

  text-align:center !important;
}

#personnelView .error{
  color:#ef9b9b !important;
}

/* =========================================================
   DESKTOP >= 1201
   ========================================================= */

@media (min-width:1201px){

  #personnelView .personnel-row{
    min-height:74px !important;
  }

}

/* =========================================================
   TABLET 761 - 1200
   ========================================================= */

@media (min-width:761px) and (max-width:1200px){

  #personnelView.panel{
    border-radius:17px !important;
  }

  #personnelView .panel-head{
    padding:17px !important;
  }

  #personnelView #personnelTable{
    padding:0 17px 17px !important;
  }

  #personnelView .personnel-row{
    grid-template-columns:
      46px
      minmax(150px,1.5fr)
      minmax(85px,.65fr)
      minmax(70px,.55fr)
      minmax(175px,1fr) !important;

    gap:10px !important;

    padding:15px 0 !important;
  }

  #personnelView .personnel-avatar{
    width:40px !important;
    height:40px !important;

    border-radius:11px !important;
  }

  #personnelView .personnel-person strong{
    font-size:14px !important;
  }

  #personnelView .personnel-actions{
    gap:6px !important;
  }

  #personnelView .personnel-actions button{
    min-height:38px !important;

    padding:0 10px !important;

    font-size:11px !important;
  }

}

/* =========================================================
   MOBILE <= 760
   ========================================================= */

@media (max-width:760px){

  #personnelView{
    width:100% !important;
    max-width:100% !important;

    overflow:hidden !important;
  }

  #personnelView.panel{
    border-radius:15px !important;
  }

  /* HEADER */

  #personnelView .panel-head{
    padding:14px !important;
  }

  #personnelView .panel-head > div{
    width:100% !important;
  }

  #personnelView #newPersonnelBtn,
  #personnelView .primary-small{
    width:100% !important;

    min-height:46px !important;
  }

  /* LIST */

  #personnelView #personnelTable{
    display:flex !important;

    flex-direction:column !important;

    gap:10px !important;

    padding:12px !important;
  }

  /*
    Mobile card:
    avatar + person
    role + status
    actions
  */

  #personnelView .personnel-row{
    display:grid !important;

    grid-template-columns:
      44px
      minmax(0,1fr)
      auto !important;

    grid-template-areas:
      "avatar person person"
      "role role status"
      "actions actions actions" !important;

    gap:12px !important;

    width:100% !important;

    padding:15px !important;

    border:
      1px solid rgba(101,156,177,.18) !important;

    border-radius:14px !important;

    background:
      linear-gradient(
        145deg,
        #0b2a37,
        #08232f
      ) !important;

    box-shadow:
      0 8px 22px rgba(0,0,0,.11) !important;
  }

  #personnelView .personnel-row > .personnel-avatar{
    grid-area:avatar !important;
  }

  #personnelView .personnel-row > .personnel-person{
    grid-area:person !important;
  }

  #personnelView .personnel-row > div:nth-child(3){
    grid-area:role !important;

    justify-self:start !important;
  }

  #personnelView .personnel-row > div:nth-child(4){
    grid-area:status !important;

    justify-self:end !important;
  }

  #personnelView .personnel-row > .personnel-actions{
    grid-area:actions !important;

    display:grid !important;

    grid-template-columns:
      1fr 1fr !important;

    width:100% !important;

    gap:8px !important;
  }

  #personnelView .personnel-avatar{
    width:42px !important;
    height:42px !important;
  }

  #personnelView .personnel-person strong{
    font-size:15px !important;
  }

  #personnelView .personnel-person .muted{
    font-size:11px !important;
  }

  #personnelView .personnel-role,
  #personnelView .badge{
    min-height:26px !important;

    font-size:10px !important;
  }

  #personnelView .personnel-actions button{
    width:100% !important;

    min-height:44px !important;

    padding:0 10px !important;
  }

  /* FORM */

  #personnelView .personnel-form-wrap,
  #personnelView [id*="personnelFormWrap"]{
    padding:14px !important;
  }

  #personnelView form{
    width:100% !important;
  }

  #personnelView form input,
  #personnelView form select,
  #personnelView form button{
    width:100% !important;
    max-width:100% !important;
  }

}

/* =========================================================
   VERY SMALL MOBILE <= 420
   ========================================================= */

@media (max-width:420px){

  #personnelView #personnelTable{
    padding:10px !important;
  }

  #personnelView .personnel-row{
    grid-template-columns:
      40px
      minmax(0,1fr)
      auto !important;

    padding:13px !important;
  }

  #personnelView .personnel-avatar{
    width:38px !important;
    height:38px !important;
  }

  #personnelView .personnel-actions{
    grid-template-columns:1fr !important;
  }

}

/* =========================================================
   TOUCH
   ========================================================= */

@media (hover:none) and (pointer:coarse){

  #personnelView button{
    min-height:44px;
  }

  #personnelView .personnel-row:hover{
    transform:none !important;
  }

}

/* SERVELIO PERSONNEL PREMIUM RESPONSIVE FINAL V1 END */

/* SERVELIO PERSONNEL PASSWORD RED FINAL START */

/* Şifre Değiştir — Kategoriler / Sil ile aynı yumuşak kırmızı */

#personnelView .personnel-actions .edit-btn{
  border:1px solid rgba(248,113,113,.28) !important;
  background:rgba(239,68,68,.10) !important;
  color:#f6a0a0 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#personnelView .personnel-actions .edit-btn:hover{
  border-color:rgba(248,113,113,.42) !important;
  background:rgba(239,68,68,.16) !important;
  color:#ffc0c0 !important;
}

#personnelView .personnel-actions .edit-btn:active{
  background:rgba(239,68,68,.20) !important;
  transform:translateY(0) !important;
}

/* SERVELIO PERSONNEL PASSWORD RED FINAL END */

/* SERVELIO SETTINGS PREMIUM RESPONSIVE FINAL V1 START */

/* =========================================================
   SETTINGS — CATEGORY COLOR LANGUAGE
   Desktop + Tablet + Mobile
   ========================================================= */

#settingsView{
  --set-surface:#0b2532;
  --set-surface-2:#09212d;
  --set-surface-3:#071f2a;
  --set-surface-soft:#0b2a37;
  --set-border:rgba(99,154,176,.20);
  --set-border-soft:rgba(110,164,184,.15);
  --set-text:#eef6f8;
  --set-muted:#789aa9;
  --set-turquoise:#20d5c2;

  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;

  background:transparent !important;
  box-shadow:none !important;

  color:var(--set-text) !important;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

#settingsView .settings-page-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  gap:16px !important;

  margin-bottom:18px !important;

  min-width:0 !important;
}

#settingsView .settings-page-head > div{
  min-width:0 !important;
}

#settingsView .settings-page-head h2{
  margin:0 0 5px !important;

  color:#f5fafb !important;

  font-weight:950 !important;
}

#settingsView .settings-page-head p,
#settingsView .settings-page-head .muted{
  color:var(--set-muted) !important;
}


/* =========================================================
   RESTAURANT OPEN BADGE
   ========================================================= */

#settingsView .restaurant-open-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:34px !important;

  padding:7px 13px !important;

  border-radius:999px !important;

  font-size:12px !important;
  font-weight:900 !important;

  white-space:nowrap !important;
}

#settingsView .restaurant-open-badge.open{
  border:1px solid rgba(52,211,153,.22) !important;
  background:rgba(52,211,153,.10) !important;
  color:#72dba9 !important;
}

#settingsView .restaurant-open-badge.closed{
  border:1px solid rgba(248,113,113,.24) !important;
  background:rgba(239,68,68,.10) !important;
  color:#f2a0a0 !important;
}


/* =========================================================
   ALL SETTINGS CARDS
   ========================================================= */

#settingsView .settings-card{
  width:100% !important;
  min-width:0 !important;

  margin-bottom:16px !important;

  border:1px solid var(--set-border) !important;
  border-radius:20px !important;

  background:
    linear-gradient(
      180deg,
      var(--set-surface) 0%,
      var(--set-surface-2) 100%
    ) !important;

  box-shadow:
    0 16px 40px rgba(0,0,0,.14) !important;

  overflow:hidden !important;
}


/* =========================================================
   CARD HEADERS
   ========================================================= */

#settingsView .settings-card-head{
  padding:18px 20px !important;

  border-bottom:
    1px solid var(--set-border-soft) !important;

  background:transparent !important;
}

#settingsView .settings-card-head h3{
  margin:0 !important;

  color:#f3f8fa !important;

  font-size:18px !important;
  font-weight:900 !important;
}

#settingsView .settings-card-head p,
#settingsView .settings-card-head .muted{
  margin-top:6px !important;

  color:var(--set-muted) !important;
}


/* =========================================================
   RESTAURANT INFO GRID
   ========================================================= */

#settingsView .settings-form-grid{
  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  gap:16px !important;

  padding:20px !important;
}

#settingsView .settings-form-grid > *{
  min-width:0 !important;
}


/* =========================================================
   LABELS
   ========================================================= */

#settingsView label{
  color:#d8e7ec !important;
}

#settingsView label > strong,
#settingsView .settings-field > strong{
  color:#eaf3f6 !important;
}


/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

#settingsView input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#settingsView select,
#settingsView textarea{
  width:100% !important;
  max-width:100% !important;

  min-height:44px !important;

  border:
    1px solid rgba(105,157,178,.27) !important;

  border-radius:11px !important;

  background:#071f2a !important;

  color:#edf6f8 !important;

  outline:none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015) !important;
}

#settingsView input::placeholder,
#settingsView textarea::placeholder{
  color:#648896 !important;
}

#settingsView input:not([type="checkbox"]):not([type="radio"]):focus,
#settingsView select:focus,
#settingsView textarea:focus{
  border-color:
    rgba(45,212,191,.58) !important;

  box-shadow:
    0 0 0 3px rgba(45,212,191,.07) !important;
}

#settingsView select option{
  background:#071f2a;
  color:#edf6f8;
}


/* =========================================================
   LOGO PREMIUM
   ========================================================= */

#settingsView .sv-logo-premium-head,
#settingsView .sv-store-language-header{
  border-bottom:
    1px solid var(--set-border-soft) !important;

  background:transparent !important;
}

#settingsView .sv-logo-premium-head h3,
#settingsView .sv-store-language-header h3{
  color:#f3f8fa !important;
}

#settingsView .sv-logo-premium-head p,
#settingsView .sv-store-language-header p{
  color:var(--set-muted) !important;
}

#settingsView .sv-settings-icon{
  border:
    1px solid rgba(45,212,191,.15) !important;

  background:
    rgba(45,212,191,.055) !important;

  color:#3bd9c7 !important;
}

#settingsView .sv-logo-dropzone{
  border:
    1px dashed rgba(45,212,191,.19) !important;

  background:
    rgba(4,25,34,.30) !important;

  border-radius:16px !important;
}

#settingsView .sv-logo-dropzone.dragging{
  border-color:
    rgba(45,212,191,.55) !important;

  background:
    rgba(45,212,191,.055) !important;
}

#settingsView .sv-logo-preview-box{
  border:
    1px solid rgba(105,157,178,.22) !important;

  background:#0b2935 !important;

  border-radius:15px !important;
}

#settingsView .sv-logo-upload-content > strong{
  color:#edf6f8 !important;
}

#settingsView .sv-logo-upload-content > span,
#settingsView .sv-logo-status{
  color:var(--set-muted) !important;
}


/* Logo change */

#settingsView .sv-logo-primary{
  border:
    1px solid rgba(45,212,191,.28) !important;

  background:
    rgba(45,212,191,.09) !important;

  color:#74ddd1 !important;
}

#settingsView .sv-logo-primary:hover{
  border-color:
    rgba(45,212,191,.42) !important;

  background:
    rgba(45,212,191,.15) !important;
}


/* Logo remove — same soft red language */

#settingsView .sv-logo-remove{
  border:
    1px solid rgba(248,113,113,.25) !important;

  background:
    rgba(239,68,68,.09) !important;

  color:#efa0a0 !important;
}

#settingsView .sv-logo-remove:hover{
  background:
    rgba(239,68,68,.15) !important;
}


/* =========================================================
   ORDER SETTINGS
   ========================================================= */

#settingsView .settings-switch-list{
  padding:0 20px 20px !important;
}

#settingsView .settings-switch-row{
  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:20px !important;

  min-height:72px !important;

  padding:15px 0 !important;

  border-bottom:
    1px solid var(--set-border-soft) !important;
}

#settingsView .settings-switch-row:last-child{
  border-bottom:0 !important;
}

#settingsView .settings-switch-row > div{
  min-width:0 !important;
  flex:1 !important;
}

#settingsView .settings-switch-row strong{
  display:block !important;

  color:#edf5f7 !important;

  font-size:14px !important;
  font-weight:900 !important;
}

#settingsView .settings-switch-row small{
  display:block !important;

  margin-top:4px !important;

  color:#7898a6 !important;

  font-size:12px !important;
}


/* =========================================================
   TOGGLE
   ========================================================= */

#settingsView .toggle-switch{
  flex:0 0 auto !important;

  border:
    1px solid rgba(105,157,178,.18) !important;

  box-shadow:none !important;
}

#settingsView
.settings-switch-row
input:checked + .toggle-switch{
  background:#19b99f !important;
}


/* =========================================================
   OPENING HOURS
   ========================================================= */

#settingsView #openingHoursGrid{
  padding:0 20px 20px !important;
}

#settingsView .opening-row{
  display:grid !important;

  grid-template-columns:
    minmax(150px,1fr)
    90px
    130px
    30px
    130px !important;

  gap:14px !important;

  align-items:center !important;

  min-width:0 !important;

  padding:12px 0 !important;

  border-bottom:
    1px solid var(--set-border-soft) !important;
}

#settingsView .opening-row:last-child{
  border-bottom:0 !important;
}

#settingsView .opening-row > *{
  min-width:0 !important;
}

#settingsView .opening-row > strong{
  color:#edf6f8 !important;

  font-size:14px !important;
  font-weight:900 !important;
}

#settingsView .opening-row > label{
  display:flex !important;

  align-items:center !important;

  gap:8px !important;

  color:#d7e6eb !important;

  font-size:12px !important;
  font-weight:800 !important;
}

#settingsView .opening-row > span{
  color:#6f92a1 !important;

  text-align:center !important;
}

#settingsView .opening-row input[type="time"]{
  min-width:0 !important;
  width:100% !important;
}


/* =========================================================
   DELIVERY ZONES
   ========================================================= */

#settingsView .delivery-zone-form,
#settingsView .delivery-zone-form-wrap{
  border-color:
    var(--set-border-soft) !important;

  background:
    rgba(3,20,28,.22) !important;
}

#settingsView .delivery-zones-table{
  width:100% !important;
  min-width:0 !important;

  background:transparent !important;
}

#settingsView .delivery-zone-row{
  width:100% !important;
  min-width:0 !important;

  border-bottom:
    1px solid var(--set-border-soft) !important;

  background:transparent !important;

  color:#dcebef !important;
}

#settingsView .delivery-zone-row:last-child{
  border-bottom:0 !important;
}

#settingsView .delivery-zone-row strong{
  color:#f1f7f9 !important;
}

#settingsView .delivery-zone-row small,
#settingsView .delivery-zone-row .muted{
  color:#7193a2 !important;
}


/* Delivery buttons */

#settingsView .delivery-zone-row button{
  min-height:39px !important;

  border-radius:9px !important;

  font-weight:900 !important;
}

#settingsView .delivery-zone-row .secondary-small{
  border:
    1px solid rgba(129,140,248,.20) !important;

  background:
    rgba(99,102,241,.09) !important;

  color:#b9c5f6 !important;
}

#settingsView .delivery-zone-row .danger-small{
  border:
    1px solid rgba(248,113,113,.25) !important;

  background:
    rgba(239,68,68,.09) !important;

  color:#efa0a0 !important;
}


/* =========================================================
   STOREFRONT LANGUAGE
   ========================================================= */

#settingsView .servelio-storefront-language-card{
  border:
    1px solid var(--set-border) !important;

  background:
    linear-gradient(
      180deg,
      var(--set-surface) 0%,
      var(--set-surface-2) 100%
    ) !important;
}

#settingsView .sv-language-options{
  background:transparent !important;
}

#settingsView .sv-language-choice{
  border:
    1px solid rgba(105,157,178,.20) !important;

  background:
    #09232f !important;

  color:#dcebef !important;

  box-shadow:none !important;
}

#settingsView .sv-language-choice:hover{
  border-color:
    rgba(45,212,191,.28) !important;

  background:
    #0b2a37 !important;
}

#settingsView .sv-language-choice.active,
#settingsView .sv-language-choice.selected{
  border-color:
    rgba(45,212,191,.55) !important;

  background:
    rgba(45,212,191,.085) !important;
}

#settingsView .sv-language-choice strong{
  color:#edf6f8 !important;
}

#settingsView .sv-language-choice small{
  color:#789aa9 !important;
}


/* =========================================================
   SAVE BAR
   ========================================================= */

#settingsView .settings-save-bar{
  position:sticky !important;

  bottom:12px !important;

  z-index:15 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:16px !important;

  margin-top:18px !important;

  padding:14px 16px !important;

  border:
    1px solid rgba(45,212,191,.20) !important;

  border-radius:15px !important;

  background:
    rgba(7,31,42,.96) !important;

  box-shadow:
    0 15px 40px rgba(0,0,0,.26) !important;

  backdrop-filter:blur(14px) !important;
}

#settingsView .settings-save-bar strong{
  display:block !important;

  color:#edf6f8 !important;
}

#settingsView .settings-save-bar small{
  display:block !important;

  margin-top:3px !important;

  color:#789aa9 !important;
}

#settingsView #settingsSaveBtn{
  min-height:44px !important;

  padding:0 18px !important;

  border:
    1px solid rgba(45,212,191,.38) !important;

  border-radius:11px !important;

  background:
    linear-gradient(
      135deg,
      #20d5c2,
      #13bfae
    ) !important;

  color:#031a22 !important;

  font-weight:950 !important;

  white-space:nowrap !important;
}


/* =========================================================
   GENERAL MUTED / MESSAGES
   ========================================================= */

#settingsView .muted{
  color:var(--set-muted) !important;
}

#settingsView .settings-message{
  color:#75d8cd !important;
}

#settingsView .error{
  color:#efa0a0 !important;
}


/* =========================================================
   TABLET 761–1200
   ========================================================= */

@media (min-width:761px) and (max-width:1200px){

  #settingsView .settings-card{
    border-radius:17px !important;
  }

  #settingsView .settings-form-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:14px !important;

    padding:17px !important;
  }

  #settingsView .settings-card-head{
    padding:17px !important;
  }

  #settingsView .settings-switch-list,
  #settingsView #openingHoursGrid{
    padding-left:17px !important;
    padding-right:17px !important;
  }

  #settingsView .opening-row{
    grid-template-columns:
      minmax(125px,1fr)
      80px
      115px
      22px
      115px !important;

    gap:9px !important;
  }

  #settingsView .opening-row input[type="time"]{
    font-size:12px !important;
  }

  #settingsView .delivery-zone-row{
    font-size:12px !important;
  }

}


/* =========================================================
   MOBILE <=760
   ========================================================= */

@media (max-width:760px){

  #settingsView{
    width:100% !important;
    max-width:100% !important;

    overflow:hidden !important;
  }

  #settingsView .settings-page-head{
    flex-direction:column !important;

    align-items:flex-start !important;

    gap:11px !important;
  }

  #settingsView .restaurant-open-badge{
    align-self:flex-start !important;
  }


  /* Cards */

  #settingsView .settings-card{
    border-radius:15px !important;

    margin-bottom:12px !important;
  }

  #settingsView .settings-card-head{
    padding:15px !important;
  }

  #settingsView .settings-card-head h3{
    font-size:17px !important;
  }


  /* Restaurant info */

  #settingsView .settings-form-grid{
    grid-template-columns:
      1fr !important;

    gap:12px !important;

    padding:15px !important;
  }


  /* Inputs touch friendly */

  #settingsView input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #settingsView select,
  #settingsView textarea{
    min-height:46px !important;
  }


  /* Switches */

  #settingsView .settings-switch-list{
    padding:
      0 15px 15px !important;
  }

  #settingsView .settings-switch-row{
    min-height:70px !important;

    gap:12px !important;

    padding:13px 0 !important;
  }

  #settingsView .settings-switch-row strong{
    font-size:13px !important;
  }

  #settingsView .settings-switch-row small{
    max-width:240px !important;

    font-size:11px !important;
  }


  /* =======================================================
     OPENING HOURS MOBILE CARDS
     ======================================================= */

  #settingsView #openingHoursGrid{
    display:flex !important;

    flex-direction:column !important;

    gap:9px !important;

    padding:12px !important;
  }

  #settingsView .opening-row{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    grid-template-areas:
      "day enabled"
      "from from"
      "to to" !important;

    gap:10px !important;

    padding:14px !important;

    border:
      1px solid rgba(101,156,177,.18) !important;

    border-radius:13px !important;

    background:
      linear-gradient(
        145deg,
        #0b2a37,
        #08232f
      ) !important;
  }

  #settingsView .opening-row > strong{
    grid-area:day !important;

    align-self:center !important;
  }

  #settingsView .opening-row > label{
    grid-area:enabled !important;

    justify-self:end !important;
  }

  #settingsView .opening-row .opening-from{
    grid-area:from !important;
  }

  #settingsView .opening-row .opening-to{
    grid-area:to !important;
  }

  #settingsView .opening-row > span{
    display:none !important;
  }

  #settingsView .opening-row .opening-from,
  #settingsView .opening-row .opening-to{
    width:100% !important;
  }


  /* =======================================================
     DELIVERY ZONES MOBILE
     ======================================================= */

  #settingsView .delivery-zones-table{
    padding:12px !important;
  }

  #settingsView .delivery-zone-row{
    border:
      1px solid rgba(101,156,177,.18) !important;

    border-radius:13px !important;

    margin-bottom:10px !important;

    padding:14px !important;

    background:
      linear-gradient(
        145deg,
        #0b2a37,
        #08232f
      ) !important;
  }

  #settingsView .delivery-zone-row:last-child{
    margin-bottom:0 !important;
  }

  #settingsView .delivery-zone-row button{
    min-height:44px !important;
  }


  /* Logo */

  #settingsView .sv-logo-dropzone{
    grid-template-columns:
      1fr !important;

    gap:15px !important;

    margin:
      0 15px 15px !important;

    padding:14px !important;
  }

  #settingsView .sv-logo-preview-box{
    height:160px !important;
  }

  #settingsView .sv-logo-actions{
    display:grid !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:8px !important;

    width:100% !important;
  }

  #settingsView .sv-logo-primary,
  #settingsView .sv-logo-remove{
    width:100% !important;

    min-height:44px !important;
  }


  /* Languages */

  #settingsView .sv-language-options{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:8px !important;

    padding:
      2px 15px 15px !important;
  }

  #settingsView .sv-language-choice{
    min-height:64px !important;
  }


  /* Save bar */

  #settingsView .settings-save-bar{
    bottom:8px !important;

    flex-direction:column !important;

    align-items:stretch !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding:12px !important;

    border-radius:14px !important;
  }

  #settingsView #settingsSaveBtn{
    width:100% !important;

    min-height:47px !important;
  }

}


/* =========================================================
   SMALL MOBILE <=420
   ========================================================= */

@media (max-width:420px){

  #settingsView .sv-language-options{
    grid-template-columns:
      1fr !important;
  }

  #settingsView .sv-logo-actions{
    grid-template-columns:
      1fr !important;
  }

  #settingsView .settings-switch-row small{
    max-width:190px !important;
  }

}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover:none) and (pointer:coarse){

  #settingsView button,
  #settingsView select{
    min-height:44px;
  }

}

/* SERVELIO SETTINGS PREMIUM RESPONSIVE FINAL V1 END */

/* =========================================================
   SERVELIO ADMIN COMPANY BRANDING THEME FINAL V1
   ========================================================= */

.sv-profile-section{
  position:relative;
  overflow:hidden;
}

.sv-profile-section::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--accent,#00bfae);
  opacity:.8;
}

.sv-theme-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:14px;
}

.sv-theme-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:110px;
  padding:18px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}

.sv-theme-card-active{
  cursor:pointer;
  border-color:rgba(0,191,174,.48);
}

.sv-theme-card-active input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.sv-theme-preview{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.sv-theme-preview strong{
  font-size:16px;
}

.sv-theme-preview small{
  opacity:.65;
}

.sv-theme-status{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(0,191,174,.12);
}

.sv-theme-card-coming{
  opacity:.55;
}

@media(max-width:760px){

  .sv-theme-grid{
    grid-template-columns:1fr;
  }

  .sv-theme-card{
    min-height:96px;
  }

}



/* =========================================================
   SERVELIO ADMIN SIDEBAR V2 + THEME SELECTOR FINAL
   ========================================================= */

/* ---------- SIDEBAR ---------- */

body.sv-premium-admin-ready .sidebar{
  width:208px !important;
  padding:18px 12px 14px !important;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(0,214,190,.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #06141d 0%,
      #071823 48%,
      #06131c 100%
    ) !important;
  border-right:1px solid rgba(110,231,215,.08) !important;
}

body.sv-premium-admin-ready .sidebar > .side-brand{
  margin:0 6px 16px !important;
}

body.sv-premium-admin-ready .sidebar .sv-sidebar-restaurant{
  margin:0 0 18px !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.12) !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:none !important;
}

.sv-sidebar-nav{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  overflow:visible !important;
}

.sv-sidebar-section{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.sv-sidebar-section-title{
  display:block;
  padding:0 9px 5px;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.17em;
  color:#547181;
  text-transform:uppercase;
}

body.sv-premium-admin-ready .sidebar .nav{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;

  width:100% !important;
  min-height:45px !important;

  margin:0 !important;
  padding:7px 9px !important;

  border:1px solid transparent !important;
  border-radius:11px !important;

  background:transparent !important;
  color:#9eb1bd !important;

  text-align:left !important;
  box-shadow:none !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease !important;
}

body.sv-premium-admin-ready .sidebar .nav::before{
  content:"" !important;
  position:absolute !important;
  left:-12px !important;
  top:10px !important;
  bottom:10px !important;
  width:2px !important;
  border-radius:0 4px 4px 0 !important;
  background:#19d3bd !important;
  opacity:0 !important;
  transform:scaleY(.45) !important;
  transition:.18s ease !important;
}

body.sv-premium-admin-ready .sidebar .nav:hover{
  background:rgba(255,255,255,.04) !important;
  border-color:rgba(148,163,184,.08) !important;
  color:#eefcf9 !important;
  transform:translateX(1px);
}

body.sv-premium-admin-ready .sidebar .nav.active{
  background:
    linear-gradient(
      90deg,
      rgba(18,211,187,.13),
      rgba(18,211,187,.035)
    ) !important;

  border-color:rgba(18,211,187,.18) !important;
  color:#ffffff !important;
}

body.sv-premium-admin-ready .sidebar .nav.active::before{
  opacity:1 !important;
  transform:scaleY(1) !important;
}

.sv-nav-icon{
  flex:0 0 28px;
  width:28px;
  height:28px;

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

  border-radius:8px;

  background:rgba(148,163,184,.07);
  border:1px solid rgba(148,163,184,.08);

  color:#829aa7;
  font-size:13px;
  font-weight:900;
}

body.sv-premium-admin-ready .sidebar .nav.active .sv-nav-icon{
  background:rgba(18,211,187,.12);
  border-color:rgba(18,211,187,.18);
  color:#28dfc9;
}

.sv-nav-copy{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.sv-nav-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:11px;
  line-height:1.25;
  font-weight:800;
  color:inherit;
}

.sv-nav-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:8px;
  line-height:1.2;
  font-weight:600;
  color:#587382;
}

body.sv-premium-admin-ready .sidebar .nav.active .sv-nav-copy small{
  color:#74a49e;
}

body.sv-premium-admin-ready .sidebar .ai-badge{
  margin-left:auto !important;
  min-width:19px !important;
  height:19px !important;
  padding:0 5px !important;
  border-radius:999px !important;
  background:#16c9ad !important;
  color:#031b18 !important;
  font-size:9px !important;
  font-weight:900 !important;
}

body.sv-premium-admin-ready .sidebar .logout,
body.sv-premium-admin-ready .sidebar button.logout{
  min-height:38px !important;
  margin-top:auto !important;
  padding:8px 12px !important;
  border-radius:10px !important;

  border:1px solid rgba(248,113,113,.16) !important;
  background:rgba(127,29,29,.12) !important;

  color:#f39a9a !important;
  font-size:10px !important;
  font-weight:800 !important;

  box-shadow:none !important;
}

body.sv-premium-admin-ready .sidebar .logout:hover{
  background:rgba(127,29,29,.22) !important;
  border-color:rgba(248,113,113,.28) !important;
}


/* ---------- PREMIUM THEME SELECTOR ---------- */

.sv-theme-grid-premium{
  display:grid !important;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) !important;
  gap:18px !important;
  margin-top:18px !important;
}

.sv-theme-premium-card{
  position:relative;
  min-width:0;

  display:flex;
  flex-direction:column;

  border-radius:18px;
  overflow:hidden;

  border:1px solid rgba(148,163,184,.14);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );

  box-shadow:
    0 12px 35px rgba(0,0,0,.12);
}

.sv-theme-premium-active{
  cursor:pointer;
  border-color:rgba(25,211,189,.35);
  box-shadow:
    0 0 0 1px rgba(25,211,189,.05),
    0 16px 42px rgba(0,0,0,.16);
}

.sv-theme-premium-active > input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.sv-theme-visual{
  position:relative;
  min-height:170px;
  padding:18px;

  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(25,211,189,.22),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #071a24,
      #0a2930
    );
}

.sv-theme-browser{
  display:flex;
  gap:5px;
  margin-bottom:16px;
}

.sv-theme-browser span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
}

.sv-theme-demo{
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;

  min-height:118px;
  padding:20px;

  border-radius:15px 15px 0 0;

  background:
    linear-gradient(
      135deg,
      rgba(5,18,25,.94),
      rgba(9,43,45,.92)
    );

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

  border-bottom:0;
}

.sv-theme-demo-brand{
  color:#20d8c0;
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
}

.sv-theme-demo-title{
  max-width:220px;
  margin-top:10px;

  color:white;
  font-size:19px;
  line-height:1.05;
  font-weight:900;
}

.sv-theme-demo-products{
  display:flex;
  gap:7px;
  margin-top:16px;
}

.sv-theme-demo-products i{
  display:block;
  width:48px;
  height:24px;
  border-radius:7px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.12),
      rgba(25,211,189,.11)
    );

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

.sv-theme-card-content{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px 18px 12px;
}

.sv-theme-card-content > div{
  min-width:0;
}

.sv-theme-number{
  display:block;
  margin-bottom:5px;

  color:#22d7c1;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}

.sv-theme-card-content strong{
  display:block;
  color:#f5fbfa;
  font-size:15px;
  font-weight:900;
}

.sv-theme-card-content p{
  max-width:420px;
  margin:6px 0 0;

  color:#6f8d99;
  font-size:10px;
  line-height:1.45;
}

.sv-theme-active-badge,
.sv-theme-coming-badge{
  align-self:flex-start;
  flex:0 0 auto;

  padding:6px 9px;
  border-radius:999px;

  font-size:8px;
  font-weight:900;
}

.sv-theme-active-badge{
  color:#39e3cd;
  background:rgba(25,211,189,.09);
  border:1px solid rgba(25,211,189,.18);
}

.sv-theme-coming-badge{
  color:#7f98a5;
  background:rgba(148,163,184,.06);
  border:1px solid rgba(148,163,184,.10);
}

.sv-theme-card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  margin-top:auto;
  padding:0 18px 18px;
}

.sv-theme-selected{
  display:inline-flex;
  align-items:center;
  gap:6px;

  color:#83a29f;
  font-size:9px;
  font-weight:800;
}

.sv-theme-selected i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1bd2ba;
  box-shadow:0 0 0 4px rgba(27,210,186,.08);
}

.sv-theme-preview-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  min-height:34px;
  padding:0 13px;

  border-radius:9px;

  text-decoration:none !important;

  color:#061b19 !important;
  background:#1bd2ba;

  font-size:9px;
  font-weight:900;

  box-shadow:
    0 8px 22px rgba(27,210,186,.14);

  transition:.18s ease;
}

.sv-theme-preview-btn:hover{
  transform:translateY(-1px);
  background:#32dfc9;
}

.sv-theme-coming-card{
  opacity:.72;
}

.sv-theme-coming-visual{
  position:relative;

  min-height:170px;

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

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(148,163,184,.08),
      transparent 42%
    ),
    rgba(255,255,255,.012);
}

.sv-theme-coming-stack{
  position:relative;
  width:150px;
  height:92px;
}

.sv-theme-coming-stack span{
  position:absolute;
  width:115px;
  height:70px;

  border-radius:11px;

  background:#102733;
  border:1px solid rgba(148,163,184,.12);
}

.sv-theme-coming-stack span:nth-child(1){
  left:0;
  top:18px;
  opacity:.38;
}

.sv-theme-coming-stack span:nth-child(2){
  left:17px;
  top:9px;
  opacity:.6;
}

.sv-theme-coming-stack span:nth-child(3){
  left:34px;
  top:0;
  opacity:.85;
}

.sv-theme-lock{
  position:absolute;

  width:38px;
  height:38px;

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

  border-radius:50%;

  background:#132e39;
  border:1px solid rgba(148,163,184,.16);

  color:#79919c;
  font-size:20px;
  font-weight:400;
}

.sv-theme-coming-footer{
  margin-top:auto;
  padding:0 18px 18px;

  color:#59737f;
  font-size:9px;
  font-weight:700;
}


/* ---------- RESPONSIVE ---------- */

@media(max-width:1050px){

  .sv-theme-grid-premium{
    grid-template-columns:1fr !important;
  }

}

@media(max-width:800px){

  body.sv-premium-admin-ready .sidebar{
    width:min(290px,86vw) !important;
  }

  .sv-sidebar-section-title{
    display:block !important;
  }

  .sv-nav-copy{
    display:flex !important;
  }

  body.sv-premium-admin-ready .sidebar .nav{
    font-size:inherit !important;
  }

}


/* =========================================================
   SERVELIO SIDEBAR DOUBLE ICON FIX FINAL
   New V2 navigation is the single visual source.
   ========================================================= */

body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav::after{
  display:none !important;
  content:none !important;
}

/*
 * Old premium sidebar layers may inject an additional
 * decorative icon before/inside navigation buttons.
 * V2 owns the icon through .sv-nav-icon.
 */
body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav
> :not(.sv-nav-icon):not(.sv-nav-copy):not(.ai-badge){
  /*
   * Do not globally hide unknown children because some
   * navigation runtime elements may be functional.
   */
}

/* V2 icon: exactly one visible icon container */
body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.sv-nav-icon{
  display:flex !important;
  flex:0 0 28px !important;
  width:28px !important;
  height:28px !important;
  margin:0 !important;
}

/*
 * Some previous sidebar versions created icon wrappers
 * immediately before our V2 icon.
 */
body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav
> .nav-icon,

body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav
> .sidebar-nav-icon,

body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav
> .sv-nav-leading-icon,

body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav
> [data-nav-icon]{
  display:none !important;
}


/* ---------------------------------------------------------
   REMOVE LEGACY GENERATED PREFIX SYMBOLS
   --------------------------------------------------------- */

body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav
.sv-nav-copy strong::before,

body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav
.sv-nav-copy strong::after{
  content:none !important;
  display:none !important;
}


/* ---------------------------------------------------------
   SECTION TITLES
   V2 section title is the only section heading.
   --------------------------------------------------------- */

body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.sv-sidebar-section-title{
  display:block !important;
}

/*
 * Hide legacy section labels that sit directly around
 * the V2 navigation. Does not affect V2 titles.
 */
body.sv-premium-admin-ready
.sidebar
.sidebar-section-title:not(.sv-sidebar-section-title),

body.sv-premium-admin-ready
.sidebar
.nav-section-title:not(.sv-sidebar-section-title),

body.sv-premium-admin-ready
.sidebar
.nav-label:not(.sv-sidebar-section-title),

body.sv-premium-admin-ready
.sidebar
.menu-section-label:not(.sv-sidebar-section-title){
  display:none !important;
}


/* ---------------------------------------------------------
   CLEAN V2 ALIGNMENT
   --------------------------------------------------------- */

body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav{
  grid-template-columns:none !important;
}

body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav
.sv-nav-copy{
  margin-left:0 !important;
  padding-left:0 !important;
}

body.sv-premium-admin-ready
.sidebar
.sv-sidebar-nav
.nav
.ai-badge{
  flex:0 0 auto !important;
}



/* ============================================================
   SERVELIO SIDEBAR SINGLE SOURCE FINAL V1
   ============================================================ */

/*
 * Sidebar V2 is the only icon source.
 */
.sidebar.sv-sidebar-single-source
.sv-sidebar-nav
.nav::before,

.sidebar.sv-sidebar-single-source
.sv-sidebar-nav
.nav::after{
  content:none !important;
  display:none !important;
}


/*
 * Explicitly neutralize the old data icon renderer.
 */
.sidebar.sv-sidebar-single-source
.sv-sidebar-nav
.nav[data-sv-icon]::before,

.sidebar.sv-sidebar-single-source
.sv-sidebar-nav
.nav[data-sv-icon]::after{
  content:none !important;
  display:none !important;
}


/*
 * Exactly one V2 icon container.
 */
.sidebar.sv-sidebar-single-source
.sv-sidebar-nav
.sv-nav-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 30px !important;

  width:30px !important;
  height:30px !important;

  margin:0 !important;
}


/*
 * Keep copy aligned cleanly.
 */
.sidebar.sv-sidebar-single-source
.sv-sidebar-nav
.sv-nav-copy{
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}


/*
 * Remove obsolete visual layers even during the tiny
 * initialization window before JS cleanup.
 */
#svOperationsNavLabel,
#svOperationsRestaurantCard,
#servelioV3Workspace{
  display:none !important;
}


/*
 * V2 owns section titles.
 */
.sidebar.sv-sidebar-single-source
.sv-sidebar-section-title{
  display:block !important;
}


/*
 * Cleaner navigation spacing.
 */
.sidebar.sv-sidebar-single-source
.sv-sidebar-nav
.nav{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}


/*
 * Prevent old grid layouts from reserving a second icon column.
 */
.sidebar.sv-sidebar-single-source
.sv-sidebar-nav
.nav{
  grid-template-columns:none !important;
}


/* SERVELIO SIDEBAR SINGLE SOURCE FINAL V1 END */



/* ============================================================
   SERVELIO SIDEBAR VISUAL FINAL V1
   FINAL POLISH — PRESENTATION ONLY
   ============================================================ */


/* ------------------------------------------------------------
   1. OLD / DUPLICATE RESTAURANT WORKSPACE CARD
   ------------------------------------------------------------ */

#svOperationsRestaurantCard,
#servelioV3Workspace{
  display:none !important;
}


/* ------------------------------------------------------------
   2. OLD SECTION LABELS
   V2 section titles are the only visual section labels.
   ------------------------------------------------------------ */

.sidebar .sv-operations-nav-label,
.sidebar #svOperationsNavLabel{
  display:none !important;
}


/* ------------------------------------------------------------
   3. SIDEBAR WIDTH
   Give labels enough room; avoid "Siparişl..." etc.
   ------------------------------------------------------------ */

body.sv-premium-admin-ready .sidebar{
  width:216px !important;
  min-width:216px !important;
  padding-left:12px !important;
  padding-right:12px !important;
}


/* ------------------------------------------------------------
   4. V2 NAVIGATION GROUPS
   ------------------------------------------------------------ */

.sidebar .sv-sidebar-nav{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;
}


.sidebar .sv-sidebar-section{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;
}


.sidebar .sv-sidebar-section-title{
  display:block !important;

  margin:0 !important;
  padding:0 8px 6px !important;

  color:#55727f !important;

  font-size:8px !important;
  line-height:1 !important;
  font-weight:900 !important;

  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}


/* ------------------------------------------------------------
   5. NAV ROW
   ------------------------------------------------------------ */

.sidebar .sv-sidebar-nav .nav{
  position:relative !important;

  display:flex !important;
  align-items:center !important;

  width:100% !important;
  min-width:0 !important;
  min-height:46px !important;

  gap:10px !important;

  margin:0 !important;
  padding:7px 9px !important;

  border-radius:11px !important;

  overflow:hidden !important;

  grid-template-columns:none !important;
}


/* ------------------------------------------------------------
   6. REMOVE EVERY LEGACY GENERATED ICON
   Only .sv-nav-icon survives.
   ------------------------------------------------------------ */

.sidebar .sv-sidebar-nav .nav::after{
  display:none !important;
  content:none !important;
}


.sidebar .sv-sidebar-nav .nav[data-sv-icon]::before,
.sidebar .sv-sidebar-nav .nav[data-sv-icon]::after{
  display:none !important;
  content:none !important;
}


/*
   Some legacy admin layers use child icon wrappers.
   Hide those, but NEVER hide our V2 icon.
*/

.sidebar .sv-sidebar-nav .nav > .nav-icon,
.sidebar .sv-sidebar-nav .nav > .sidebar-nav-icon,
.sidebar .sv-sidebar-nav .nav > .sv-nav-leading-icon,
.sidebar .sv-sidebar-nav .nav > [data-nav-icon]{
  display:none !important;
}


/* ------------------------------------------------------------
   7. THE ONE REAL ICON
   ------------------------------------------------------------ */

.sidebar .sv-sidebar-nav .sv-nav-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 30px !important;

  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;

  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;

  margin:0 !important;
  padding:0 !important;

  border-radius:9px !important;

  background:rgba(148,163,184,.065) !important;
  border:1px solid rgba(148,163,184,.09) !important;

  color:#78919e !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;

  box-sizing:border-box !important;
}


.sidebar .sv-sidebar-nav .nav.active .sv-nav-icon{
  background:rgba(20,211,188,.12) !important;
  border-color:rgba(20,211,188,.22) !important;
  color:#25dbc4 !important;
}


/* ------------------------------------------------------------
   8. NAV TEXT
   ------------------------------------------------------------ */

.sidebar .sv-sidebar-nav .sv-nav-copy{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;

  min-width:0 !important;

  gap:2px !important;

  margin:0 !important;
  padding:0 !important;
}


.sidebar .sv-sidebar-nav .sv-nav-copy strong{
  display:block !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  color:inherit !important;

  font-size:10.5px !important;
  line-height:1.2 !important;
  font-weight:850 !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}


.sidebar .sv-sidebar-nav .sv-nav-copy small{
  display:block !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  color:#5e7b88 !important;

  font-size:7.5px !important;
  line-height:1.2 !important;
  font-weight:600 !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}


/* ------------------------------------------------------------
   9. ACTIVE STATE
   ------------------------------------------------------------ */

.sidebar .sv-sidebar-nav .nav.active{
  background:
    linear-gradient(
      90deg,
      rgba(18,211,187,.12),
      rgba(18,211,187,.035)
    ) !important;

  border-color:rgba(18,211,187,.20) !important;

  color:#f4fffd !important;
}


/*
   Active bar remains, but no legacy icon may use ::before.
   Restrict it to active row only.
*/

.sidebar .sv-sidebar-nav .nav:not(.active)::before{
  content:none !important;
  display:none !important;
}


.sidebar .sv-sidebar-nav .nav.active::before{
  content:"" !important;

  display:block !important;

  position:absolute !important;

  left:-9px !important;
  top:10px !important;
  bottom:10px !important;

  width:2px !important;

  border-radius:0 3px 3px 0 !important;

  background:#20d7bf !important;
}


/* ------------------------------------------------------------
   10. AI BADGE
   ------------------------------------------------------------ */

.sidebar .sv-sidebar-nav .ai-badge{
  flex:0 0 auto !important;

  min-width:19px !important;
  height:19px !important;

  margin-left:auto !important;
  padding:0 5px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:999px !important;

  font-size:8px !important;
  font-weight:900 !important;
}


/* ------------------------------------------------------------
   11. REMOVE OLD EMPTY VISUAL COLUMNS
   ------------------------------------------------------------ */

.sidebar .sv-sidebar-nav .nav > span:empty:not(.ai-badge){
  display:none !important;
}


/* ------------------------------------------------------------
   12. MOBILE
   ------------------------------------------------------------ */

@media(max-width:800px){

  body.sv-premium-admin-ready .sidebar{
    width:min(292px,88vw) !important;
    min-width:0 !important;
  }

  .sidebar .sv-sidebar-nav .sv-nav-copy strong{
    font-size:11px !important;
  }

  .sidebar .sv-sidebar-nav .sv-nav-copy small{
    font-size:8px !important;
  }

}


/* SERVELIO SIDEBAR VISUAL FINAL V1 END */




/* SERVELIO SIDEBAR SOURCE CLEAN VISUAL V2 START */

/*
 * V2 is the only sidebar visual source.
 */

body.sv-premium-admin-ready
.sidebar.sv-sidebar-source-clean-v2{
  width:216px !important;
  min-width:216px !important;
  padding-left:11px !important;
  padding-right:11px !important;
  box-sizing:border-box !important;
}


/* ---------------------------------------------------------
   NAV STRUCTURE
   --------------------------------------------------------- */

.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  width:100% !important;
  min-width:0 !important;
}


.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-section{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 0 15px !important;
}


.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-section-title{
  display:block !important;
  margin:0 8px 4px !important;

  font-size:8px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;

  color:#557080 !important;
  text-transform:uppercase !important;
}


/* ---------------------------------------------------------
   NAV BUTTON
   --------------------------------------------------------- */

body.sv-premium-admin-ready
.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav{
  position:relative !important;

  display:flex !important;
  align-items:center !important;

  width:100% !important;
  min-width:0 !important;
  min-height:48px !important;

  gap:10px !important;

  padding:7px 9px !important;
  margin:0 !important;

  border:1px solid transparent !important;
  border-radius:11px !important;

  box-sizing:border-box !important;

  overflow:hidden !important;

  text-align:left !important;

  background:transparent !important;

  grid-template-columns:none !important;
}


/* Active left indicator */
body.sv-premium-admin-ready
.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav::before{
  content:"" !important;

  position:absolute !important;

  left:-1px !important;
  top:10px !important;
  bottom:10px !important;

  width:2px !important;

  border-radius:0 3px 3px 0 !important;

  background:#19d3bd !important;

  opacity:0 !important;

  transform:none !important;
}


/*
 * Absolutely no second pseudo icon.
 */
body.sv-premium-admin-ready
.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav::after{
  content:none !important;
  display:none !important;
}


body.sv-premium-admin-ready
.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav.active{
  background:
    linear-gradient(
      90deg,
      rgba(18,211,187,.12),
      rgba(18,211,187,.035)
    ) !important;

  border-color:
    rgba(18,211,187,.18) !important;
}


body.sv-premium-admin-ready
.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav.active::before{
  opacity:1 !important;
}


body.sv-premium-admin-ready
.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav:hover{
  background:
    rgba(255,255,255,.04) !important;

  border-color:
    rgba(148,163,184,.08) !important;
}


/* ---------------------------------------------------------
   EXACTLY ONE ICON
   --------------------------------------------------------- */

.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav
> .sv-nav-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 30px !important;

  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;

  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;

  margin:0 !important;
  padding:0 !important;

  border-radius:9px !important;

  background:
    rgba(148,163,184,.065) !important;

  border:
    1px solid rgba(148,163,184,.09) !important;

  color:#829aa7 !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;

  box-sizing:border-box !important;
}


.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav.active
> .sv-nav-icon{
  background:
    rgba(18,211,187,.13) !important;

  border-color:
    rgba(18,211,187,.20) !important;

  color:#29dfca !important;
}


/*
 * Old icon wrappers must never render.
 */
.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav
> .nav-icon,

.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav
> .sidebar-nav-icon,

.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav
> .sv-nav-leading-icon,

.sidebar.sv-sidebar-source-clean-v2
.sv-sidebar-nav
.nav
> [data-nav-icon]{
  display:none !important;
}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.sidebar.sv-sidebar-source-clean-v2
.sv-nav-copy{
  display:flex !important;
  flex-direction:column !important;

  flex:1 1 auto !important;

  min-width:0 !important;

  gap:2px !important;

  margin:0 !important;
  padding:0 !important;
}


.sidebar.sv-sidebar-source-clean-v2
.sv-nav-copy strong{
  display:block !important;

  width:100% !important;

  margin:0 !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;

  font-size:11px !important;
  line-height:1.25 !important;
  font-weight:800 !important;

  color:#dbe7ea !important;
}


.sidebar.sv-sidebar-source-clean-v2
.sv-nav-copy small{
  display:block !important;

  width:100% !important;

  margin:0 !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;

  font-size:8px !important;
  line-height:1.25 !important;
  font-weight:600 !important;

  color:#66808d !important;
}


.sidebar.sv-sidebar-source-clean-v2
.nav.active
.sv-nav-copy strong{
  color:#ffffff !important;
}


/* ---------------------------------------------------------
   BADGE
   --------------------------------------------------------- */

.sidebar.sv-sidebar-source-clean-v2
.ai-badge{
  flex:0 0 auto !important;
  margin-left:auto !important;
}


/* ---------------------------------------------------------
   TABLET
   Keep readable instead of collapsing text.
   --------------------------------------------------------- */

@media (min-width:761px) and (max-width:1200px){

  body.sv-premium-admin-ready
  .sidebar.sv-sidebar-source-clean-v2{
    width:205px !important;
    min-width:205px !important;
  }

}


/* ---------------------------------------------------------
   MOBILE
   Preserve drawer behavior.
   --------------------------------------------------------- */

@media (max-width:760px){

  body.sv-premium-admin-ready
  .sidebar.sv-sidebar-source-clean-v2{
    width:min(86vw, 300px) !important;
    min-width:0 !important;
  }

  .sidebar.sv-sidebar-source-clean-v2
  .sv-nav-copy strong{
    font-size:12px !important;
  }

  .sidebar.sv-sidebar-source-clean-v2
  .sv-nav-copy small{
    font-size:9px !important;
  }

}

/* SERVELIO SIDEBAR SOURCE CLEAN VISUAL V2 END */



/* ============================================================
   SERVELIO SIDEBAR V3 CLEAN VISUAL START
   ONE SIDEBAR / ONE ICON / ONE COPY
   ============================================================ */

body.sv-premium-admin-ready
.sidebar.sv-sidebar-v3-clean{
  width:224px !important;
  min-width:224px !important;

  padding-left:12px !important;
  padding-right:12px !important;

  box-sizing:border-box !important;
}


/* ------------------------------------------
   Remove legacy duplicate sidebar UI
   ------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
#svOperationsNavLabel,

.sidebar.sv-sidebar-v3-clean
.sv-operations-nav-label,

.sidebar.sv-sidebar-v3-clean
#svOperationsRestaurantCard,

.sidebar.sv-sidebar-v3-clean
#servelioV3Workspace,

.sidebar.sv-sidebar-v3-clean
#svSidebarRestaurant{
  display:none !important;
}


/* ------------------------------------------
   NAV
   ------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav{
  display:flex !important;
  flex-direction:column !important;

  width:100% !important;
  min-width:0 !important;

  gap:0 !important;

  margin:0 !important;
  padding:0 !important;
}


.sidebar.sv-sidebar-v3-clean
.sv-sidebar-section{
  display:flex !important;
  flex-direction:column !important;

  width:100% !important;
  min-width:0 !important;

  gap:5px !important;

  margin:0 0 16px !important;
  padding:0 !important;
}


.sidebar.sv-sidebar-v3-clean
.sv-sidebar-section-title{
  display:block !important;

  margin:0 !important;
  padding:0 8px 5px !important;

  color:#587381 !important;

  font-size:8px !important;
  line-height:1.2 !important;
  font-weight:900 !important;

  letter-spacing:.15em !important;
  text-transform:uppercase !important;
}


/* ------------------------------------------
   BUTTON
   ------------------------------------------ */

body.sv-premium-admin-ready
.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav{
  position:relative !important;

  display:flex !important;
  align-items:center !important;

  width:100% !important;
  min-width:0 !important;
  min-height:48px !important;

  grid-template-columns:none !important;

  gap:10px !important;

  margin:0 !important;
  padding:7px 9px !important;

  overflow:hidden !important;

  border:
    1px solid transparent !important;

  border-radius:11px !important;

  background:
    transparent !important;

  color:#a8bac3 !important;

  text-align:left !important;

  box-sizing:border-box !important;

  transform:none !important;
}


/*
 * NO pseudo icon.
 *
 * ::before is used ONLY as the active turquoise line.
 */
body.sv-premium-admin-ready
.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav::before{
  content:"" !important;

  display:block !important;

  position:absolute !important;

  left:0 !important;
  top:10px !important;
  bottom:10px !important;

  width:2px !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 4px 4px 0 !important;

  background:#20d7bf !important;

  color:transparent !important;

  font-size:0 !important;

  opacity:0 !important;

  transform:none !important;
}


body.sv-premium-admin-ready
.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav::after{
  content:none !important;
  display:none !important;
}


/* Kill any legacy data icon renderer */
body.sv-premium-admin-ready
.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav[data-sv-icon]::before,

body.sv-premium-admin-ready
.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav[data-sv-icon]::after{
  content:none !important;
}


/* ------------------------------------------
   ACTIVE / HOVER
   ------------------------------------------ */

body.sv-premium-admin-ready
.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:hover{
  background:
    rgba(255,255,255,.035) !important;

  border-color:
    rgba(148,163,184,.08) !important;

  color:#eaf7f5 !important;
}


body.sv-premium-admin-ready
.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active{
  background:
    linear-gradient(
      90deg,
      rgba(18,211,187,.12),
      rgba(18,211,187,.035)
    ) !important;

  border-color:
    rgba(18,211,187,.19) !important;

  color:#ffffff !important;
}


body.sv-premium-admin-ready
.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active::before{
  opacity:1 !important;
}


/* ------------------------------------------
   EXACTLY ONE ICON
   ------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .sv-nav-icon{
  position:static !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 30px !important;

  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;

  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;

  margin:0 !important;
  padding:0 !important;

  border:
    1px solid rgba(148,163,184,.10) !important;

  border-radius:9px !important;

  background:
    rgba(148,163,184,.065) !important;

  color:#8099a6 !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;

  box-sizing:border-box !important;

  transform:none !important;
}


.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active
> .sv-nav-icon{
  background:
    rgba(18,211,187,.13) !important;

  border-color:
    rgba(18,211,187,.22) !important;

  color:#2ce0cb !important;
}


/*
 * Legacy icon elements are never visible.
 */
.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .nav-icon,

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .sidebar-nav-icon,

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .sv-nav-leading-icon,

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .sv-nav-label,

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> [data-nav-icon]{
  display:none !important;
}


/* ------------------------------------------
   COPY
   ------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.sv-nav-copy{
  display:flex !important;
  flex-direction:column !important;

  flex:1 1 auto !important;

  min-width:0 !important;

  gap:2px !important;

  margin:0 !important;
  padding:0 !important;
}


.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.sv-nav-copy strong{
  display:block !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  color:inherit !important;

  font-size:11px !important;
  line-height:1.25 !important;
  font-weight:800 !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}


.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.sv-nav-copy small{
  display:block !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  color:#66818e !important;

  font-size:8px !important;
  line-height:1.25 !important;
  font-weight:600 !important;

  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}


/* ------------------------------------------
   BADGE
   ------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.ai-badge{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 auto !important;

  margin-left:auto !important;
}


/* ------------------------------------------
   MOBILE
   ------------------------------------------ */

@media(max-width:760px){

  body.sv-premium-admin-ready
  .sidebar.sv-sidebar-v3-clean{
    width:min(88vw,300px) !important;
    min-width:0 !important;
  }

  .sidebar.sv-sidebar-v3-clean
  .sv-sidebar-nav
  .sv-nav-copy strong{
    font-size:12px !important;
  }

  .sidebar.sv-sidebar-v3-clean
  .sv-sidebar-nav
  .sv-nav-copy small{
    font-size:9px !important;
  }

}

/* SERVELIO SIDEBAR V3 CLEAN VISUAL END */



/* ============================================================
   SERVELIO SIDEBAR V3 ABSOLUTE FINAL CSS
   ============================================================ */

/*
 * Even before JS cleanup executes,
 * only the first direct V2 icon may be visible.
 */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .sv-nav-icon ~ .sv-nav-icon{
  display:none !important;
}


/*
 * Old icon wrappers cannot participate in layout.
 */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .nav-icon,

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .sidebar-nav-icon,

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .sv-nav-leading-icon,

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> [data-nav-icon]{
  display:none !important;
}


/*
 * No textual/data pseudo icon.
 */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav::after{
  content:none !important;
  display:none !important;
}

/* SERVELIO SIDEBAR V3 ABSOLUTE FINAL CSS END */



/* ============================================================
   SERVELIO SIDEBAR PREMIUM CONTRAST V1
   VISUAL ONLY — NO NAVIGATION / JS / BUSINESS LOGIC
   ============================================================ */


/* ------------------------------------------------------------
   SIDEBAR BASE
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean{
  background:
    linear-gradient(
      180deg,
      rgba(7,27,38,.99) 0%,
      rgba(5,23,33,.99) 52%,
      rgba(4,19,28,1) 100%
    ) !important;

  border-right:
    1px solid rgba(255,255,255,.085) !important;

  box-shadow:
    16px 0 40px rgba(0,0,0,.14) !important;
}


/* ------------------------------------------------------------
   SECTION LABELS
   OPERASYON / BETRIEB / MENÜ & İÇERİK / VERWALTUNG / YÖNETİM
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-section-label,

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav-label,

.sidebar.sv-sidebar-v3-clean
.nav-section-label,

.sidebar.sv-sidebar-v3-clean
.sidebar-section-title{
  color:rgba(171,198,211,.72) !important;

  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}


/* ------------------------------------------------------------
   NORMAL MENU BUTTON
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav{
  position:relative !important;

  min-height:54px !important;

  margin:4px 10px !important;
  padding:8px 10px !important;

  border:
    1px solid rgba(255,255,255,.055) !important;

  border-radius:11px !important;

  background:
    rgba(255,255,255,.018) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018) !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}


/* ------------------------------------------------------------
   MAIN MENU TEXT
   Inspired by the password-change accent,
   but deliberately softer for navigation.
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
.sv-nav-copy
strong{
  color:#f3d9de !important;

  font-size:14px !important;
  font-weight:750 !important;
  letter-spacing:.005em !important;

  text-shadow:
    0 0 14px rgba(244,154,171,.06) !important;
}


/* Fallback for legacy nav text */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav{
  color:#f3d9de !important;
}


/* ------------------------------------------------------------
   SUBTEXT
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
.sv-nav-copy
small{
  color:rgba(188,207,218,.68) !important;

  font-size:10.5px !important;
  font-weight:500 !important;

  margin-top:2px !important;
}


/* ------------------------------------------------------------
   ICON CONTAINER
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .sv-nav-icon{
  width:34px !important;
  height:34px !important;

  flex:0 0 34px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:9px !important;

  color:#f3d9de !important;

  background:
    rgba(244,154,171,.055) !important;

  border:
    1px solid rgba(244,154,171,.13) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035) !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}


/* ------------------------------------------------------------
   HOVER
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:hover{
  background:
    linear-gradient(
      90deg,
      rgba(244,154,171,.075),
      rgba(255,255,255,.028)
    ) !important;

  border-color:
    rgba(244,154,171,.20) !important;

  box-shadow:
    0 7px 22px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.035) !important;

  transform:
    translateX(2px) !important;
}


.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:hover
.sv-nav-copy
strong{
  color:#fff1f4 !important;
}


.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:hover
> .sv-nav-icon{
  color:#ffdce3 !important;

  background:
    rgba(244,154,171,.10) !important;

  border-color:
    rgba(244,154,171,.25) !important;
}


/* ------------------------------------------------------------
   ACTIVE ITEM
   SERVELIO TURQUOISE REMAINS THE PRIMARY ACTIVE COLOR
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active{
  background:
    linear-gradient(
      90deg,
      rgba(0,230,209,.13) 0%,
      rgba(0,168,150,.075) 100%
    ) !important;

  border-color:
    rgba(0,230,209,.45) !important;

  box-shadow:
    0 8px 24px rgba(0,230,209,.07),
    inset 0 1px 0 rgba(255,255,255,.055) !important;

  transform:none !important;
}


/* Active indicator */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active::before{
  content:"" !important;

  display:block !important;

  position:absolute !important;

  left:-1px !important;
  top:9px !important;
  bottom:9px !important;

  width:3px !important;

  border-radius:
    0 4px 4px 0 !important;

  background:#00e6d1 !important;

  box-shadow:
    0 0 12px rgba(0,230,209,.42) !important;
}


/* Active title */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active
.sv-nav-copy
strong{
  color:#ffffff !important;

  text-shadow:
    0 0 16px rgba(0,230,209,.12) !important;
}


/* Active subtitle */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active
.sv-nav-copy
small{
  color:rgba(207,236,237,.78) !important;
}


/* Active icon */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active
> .sv-nav-icon{
  color:#00ead5 !important;

  background:
    rgba(0,230,209,.12) !important;

  border-color:
    rgba(0,230,209,.34) !important;

  box-shadow:
    0 0 18px rgba(0,230,209,.08),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}


/* ------------------------------------------------------------
   KEYBOARD ACCESSIBILITY
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:focus-visible{
  outline:
    2px solid rgba(0,230,209,.72) !important;

  outline-offset:
    2px !important;
}


/* ------------------------------------------------------------
   BADGES — keep them visible without overpowering menu
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
.badge,

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
.ai-badge{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 4px 12px rgba(0,0,0,.12) !important;
}


/* ------------------------------------------------------------
   LOGOUT — remains clearly destructive
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
#logoutBtn{
  border-color:
    rgba(255,105,130,.25) !important;

  background:
    rgba(255,84,112,.045) !important;

  color:#ff9aaa !important;

  font-weight:750 !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease !important;
}


.sidebar.sv-sidebar-v3-clean
#logoutBtn:hover{
  background:
    rgba(255,84,112,.10) !important;

  border-color:
    rgba(255,105,130,.42) !important;

  color:#ffc0ca !important;
}


/* ------------------------------------------------------------
   ONE ICON GUARANTEE — VISUAL ONLY
   ------------------------------------------------------------ */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav
> .sv-nav-icon ~ .sv-nav-icon{
  display:none !important;
}


/* ============================================================
   SERVELIO SIDEBAR PREMIUM CONTRAST V1 END
   ============================================================ */




/* ============================================================
   SERVELIO SIDEBAR SOFT POLISH V2
   CSS ONLY
   ============================================================ */


/* Normal menu titles — slightly brighter */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:not(.active)
.sv-nav-copy strong{
  color:#f8e2e6 !important;
  font-weight:780 !important;

  text-shadow:
    0 0 12px rgba(255,170,187,.075) !important;
}


/*
 * Reservation is dynamically generated and does not always
 * use the exact same inner markup as the static menu items.
 */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:not(.active){
  color:#f8e2e6 !important;
}


/* Reservation / legacy direct text */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:not(.active)
> strong{
  color:#f8e2e6 !important;
  font-weight:780 !important;
}


/* Subtitle — slightly easier to read */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:not(.active)
.sv-nav-copy small{
  color:rgba(203,218,226,.76) !important;
}


/* Normal icon — sweeter pink accent */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:not(.active)
> .sv-nav-icon{
  color:#f6cbd3 !important;

  background:
    rgba(246,160,177,.075) !important;

  border-color:
    rgba(246,160,177,.18) !important;
}


/* Button outline slightly more visible */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:not(.active){
  border-color:
    rgba(246,190,201,.085) !important;

  background:
    rgba(255,255,255,.022) !important;
}


/* Hover — soft, not aggressive */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav:not(.active):hover{
  color:#fff3f5 !important;

  background:
    linear-gradient(
      90deg,
      rgba(247,160,178,.09),
      rgba(255,255,255,.032)
    ) !important;

  border-color:
    rgba(247,173,188,.24) !important;

  box-shadow:
    0 7px 22px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* Keep active navigation unmistakably Servelio */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active,
.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active
.sv-nav-copy strong{
  color:#ffffff !important;
}


.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active
> .sv-nav-icon{
  color:#00ead5 !important;

  background:
    rgba(0,230,209,.14) !important;

  border-color:
    rgba(0,230,209,.40) !important;
}


/* Dynamic reservation active state */

.sidebar.sv-sidebar-v3-clean
.sv-sidebar-nav
.nav.active{
  border-color:
    rgba(0,230,209,.48) !important;

  background:
    linear-gradient(
      90deg,
      rgba(0,230,209,.14),
      rgba(0,168,150,.075)
    ) !important;
}


/* ============================================================
   SERVELIO SIDEBAR SOFT POLISH V2 END
   ============================================================ */



/* ============================================================
   SERVELIO RESERVATION SIDEBAR FAMILY FINAL
   VISUAL STRUCTURE ONLY
   ============================================================ */

.sidebar
.sv-sidebar-nav
.nav.sv-reservation-family{
  min-height:54px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 10px !important;
}


.sidebar
.sv-sidebar-nav
.nav.sv-reservation-family
.sv-nav-icon{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:9px !important;

  color:#f6cbd3 !important;
  background:rgba(246,160,177,.075) !important;
  border:1px solid rgba(246,160,177,.18) !important;
}


.sidebar
.sv-sidebar-nav
.nav.sv-reservation-family
.sv-nav-copy{
  min-width:0 !important;
  flex:1 1 auto !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;

  line-height:1.15 !important;
}


.sidebar
.sv-sidebar-nav
.nav.sv-reservation-family
.sv-nav-copy strong{
  color:#f8e2e6 !important;
  font-size:14px !important;
  font-weight:780 !important;
}


.sidebar
.sv-sidebar-nav
.nav.sv-reservation-family
.sv-nav-copy small{
  display:block !important;
  margin-top:3px !important;

  color:rgba(203,218,226,.76) !important;
  font-size:10.5px !important;
  font-weight:500 !important;
}


.sidebar
.sv-sidebar-nav
.nav.sv-reservation-family
.sv-reservation-count{
  margin-left:auto !important;

  min-width:22px !important;
  height:22px !important;
  padding:0 6px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:999px !important;

  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.08) !important;

  font-size:10px !important;
  font-weight:800 !important;
}


/* ACTIVE RESERVATION */

.sidebar
.sv-sidebar-nav
.nav.sv-reservation-family.active
.sv-nav-icon{
  color:#00ead5 !important;
  background:rgba(0,230,209,.14) !important;
  border-color:rgba(0,230,209,.40) !important;
}


.sidebar
.sv-sidebar-nav
.nav.sv-reservation-family.active
.sv-nav-copy strong{
  color:#fff !important;
}


.sidebar
.sv-sidebar-nav
.nav.sv-reservation-family.active
.sv-nav-copy small{
  color:rgba(207,236,237,.78) !important;
}


.sidebar
.sv-sidebar-nav
.nav.sv-reservation-family.active
.sv-reservation-count{
  color:#001c1a !important;
  background:#00e6d1 !important;
  border-color:#00e6d1 !important;
}


/* ============================================================
   SERVELIO RESERVATION SIDEBAR FAMILY FINAL END
   ============================================================ */