:root{
  --punico-green:#4f9d37;
  --punico-green-dark:#2f7a1f;
  --punico-text:#111827;
  --punico-border:#dbe5dc;
  --punico-border-strong:#cfd8d1;
  --punico-bg:#ffffff;
  --punico-radius:16px;
}

/* ===== Layout ===== */
.punico-shipper-wrap,
.punico-kitchen-app{
  max-width:1180px;
  margin:0 auto;
  padding:12px;
  color:var(--punico-text);
}

.punico-front-box,
.punico-stats-box,
.punico-kitchen-menu-card,
.punico-order-card,
.punico-stat-box,
.punico-stat-card{
  background:var(--punico-bg);
  border:1px solid var(--punico-border);
  border-radius:var(--punico-radius);
  box-shadow:0 1px 2px rgba(0,0,0,.02);
}

.punico-front-box,
.punico-stats-box{
  padding:14px;
  margin-bottom:14px;
}

.punico-empty-box{
  padding:18px;
  border:1px dashed var(--punico-border-strong);
  border-radius:14px;
  background:#fff;
  text-align:center;
  color:#475569;
}

/* ===== Header ===== */
.punico-header-shipper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0;
  padding:0;
}

.punico-title-shipper,
.punico-shipper-title{
  margin:0;
  padding:0;
  font-size:30px;
  line-height:1.2;
  font-weight:800;
  color:var(--punico-text);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.punico-title-icon{
  font-size:28px;
  line-height:1;
  margin:0;
  padding:0;
}

.punico-shipper-name-link{
  color:inherit;
  text-decoration:none;
}

.punico-shipper-name-link:hover{
  text-decoration:underline;
}

.punico-header-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0;
  padding:0;
  position:relative;
}

/* ===== Buttons ===== */
.punico-btn,
.punico-header-btn,
.punico-filter-bar button,
.punico-kitchen-filter-bar button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--punico-green);
  background:#fff;
  color:var(--punico-green-dark);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:.18s ease;
  box-sizing:border-box;
  text-align:center;
}

.punico-btn:hover,
.punico-filter-bar button:hover,
.punico-kitchen-filter-bar button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(15,23,42,.08);
}

.punico-btn-primary{
  background:var(--punico-green);
  color:#fff;
  border-color:var(--punico-green);
}

.punico-btn-outline{
  background:#fff;
  color:var(--punico-green-dark);
  border-color:var(--punico-green);
}

.punico-btn-mini{
  min-height:34px;
  min-width:34px;
  padding:0 10px;
  border-radius:10px;
  font-size:13px;
}

/* ===== Quick Action ===== */
.punico-action-menu{
  position:relative;
  margin:0;
}

.punico-action-menu summary{
  list-style:none;
}

.punico-action-menu summary::-webkit-details-marker{
  display:none;
}

.punico-geo-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  padding:8px 16px;
  background:#f8fafc;
  border:1px solid var(--punico-border);
  border-radius:12px;
  color:var(--punico-green-dark);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  box-sizing:border-box;
}

.punico-action-menu-list{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  background:#fff;
  border:1px solid var(--punico-border);
  border-radius:12px;
  padding:8px;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
  z-index:50;
}

.punico-action-menu-form{
  margin:0;
}

.punico-action-menu-item{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  background:#fff;
  border:1px solid transparent;
  border-radius:10px;
  color:#243224;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  box-sizing:border-box;
}

.punico-action-menu-item:hover{
  background:#f4faf2;
  border-color:#cfe3c7;
  color:#256b28;
}

.punico-action-menu-submit{
  appearance:none;
  -webkit-appearance:none;
}

/* ===== Filters ===== */
.punico-filter-bar label,
.punico-toolbar-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.punico-filter-bar label,
.punico-toolbar-group label,
.punico-note-label{
  font-size:13px;
  line-height:1.25;
  font-weight:700;
  color:var(--punico-text);
  margin:0;
}

.punico-filter-bar input,
.punico-filter-bar select,
.punico-toolbar-group input,
.punico-toolbar-group select,
.punico-select,
.punico-note-one-line{
  width:100%;
  min-height:44px;
  border:1px solid var(--punico-border-strong);
  border-radius:12px;
  padding:10px 12px;
  font-size:15px;
  line-height:1.2;
  color:var(--punico-text);
  background:#fff;
  box-sizing:border-box;
}

.punico-filter-bar input[type="date"],
.punico-toolbar-group input[type="date"]{
  appearance:auto;
  -webkit-appearance:auto;
  -moz-appearance:auto;
}

.punico-shipper-toolbar,
.punico-stats-toolbar{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.punico-toolbar-actions{
  display:flex;
  align-items:end;
}

.punico-toolbar-actions .punico-btn{
  width:100%;
}

/* ===== Stats ===== */
.punico-stats-box{
  margin-top:14px;
  padding:16px;
  background:#f9fcf8;
  border:1px solid #dbe8d8;
  border-radius:16px;
}

.punico-stats-title{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.25;
  font-weight:800;
  color:#182218;
}

.punico-stats-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}

.punico-stat-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #cfe3c7;
  background:#fff;
  color:#2e7d32;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  line-height:1;
  transition:all .18s ease;
}

.punico-stat-pill:hover{
  background:#f3faf1;
  border-color:#9dcb91;
  color:#256b28;
}

.punico-stat-pill.is-active{
  background:#5aa33a;
  border-color:#5aa33a;
  color:#fff;
}

.punico-stats-toolbar{
  align-items:end;
  padding:14px;
  background:#fff;
  border:1px solid #dfe8da;
  border-radius:14px;
  margin-bottom:12px;
}

.punico-stats-toolbar .punico-toolbar-group label{
  color:#243224;
}

.punico-stats-toolbar input[type="date"]{
  width:100%;
  min-height:42px;
  height:42px;
  padding:0 14px;
  border:1px solid #cfdcc9;
  border-radius:10px;
  background:#fff;
  color:#1f2937;
  font-size:14px;
  line-height:1.2;
  box-sizing:border-box;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.punico-stats-toolbar input[type="date"]:focus{
  border-color:#77b85a;
  box-shadow:0 0 0 3px rgba(119,184,90,.12);
}

.punico-stats-toolbar .punico-toolbar-actions{
  grid-column:1 / -1;
  width:100%;
}

.punico-stats-toolbar .punico-toolbar-actions .punico-btn{
  min-width:220px;
  height:42px;
  border:1px solid #6cab3f;
  background:#fff;
  color:#2e7d32;
}

.punico-stats-toolbar .punico-toolbar-actions .punico-btn:hover{
  background:#f2f9ef;
  border-color:#5c9e35;
}

.punico-stats-range-text{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.3;
  font-weight:600;
  color:#5e6e62;
}

.punico-stats-grid,
.punico-kitchen-stats{
  display:grid;
  gap:12px;
}

.punico-stats-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.punico-kitchen-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:14px;
}

.punico-stat-card{
  min-width:0;
  padding:14px 16px;
  border:1px solid #dbe5dc;
  border-radius:14px;
  background:#fff;
}

.punico-stat-label{
  margin-bottom:6px;
  font-size:13px;
  line-height:1.3;
  font-weight:600;
  color:#55635a;
  word-break:break-word;
}

.punico-stat-value{
  font-size:28px;
  line-height:1;
  font-weight:800;
  color:#162016;
}

.punico-stat-success{
  background:#f6fff5;
  border-color:#cfe8cb;
}

.punico-stat-pending{
  background:#fff8f0;
  border-color:#f0dcc0;
}

.punico-stat-fail{
  background:#fff5f5;
  border-color:#f0cccc;
}

.punico-stat-shift{
  background:#f7fbff;
  border-color:#d7e7fb;
}

/* ===== Orders ===== */
.punico-order-layout{
  display:grid;
  gap:8px;
}

.punico-view-list{
  grid-template-columns:1fr;
}

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

.punico-order-card{
  background:#fff;
  border:1px solid #dbe5dc;
  border-radius:12px;
  padding:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.02);
}

.punico-order-da-giao{
  background:#fff6f6;
  border-color:#f0c7c7;
}

.punico-order-chua-giao{
  background:#f6fff5;
  border-color:#cfe8cb;
}

.punico-order-that-bai{
  background:#fff7ed;
  border-color:#fed7aa;
}

.punico-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}

.punico-card-name{
  font-size:15px;
  font-weight:800;
  color:#111;
  line-height:1.2;
}

.punico-order-index{
  font-weight:700;
  color:#2e7d32;
  margin-right:6px;
}

.punico-card-top-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.punico-card-line-1{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:4px;
}

.punico-card-inline-text{
  font-size:13px;
  font-weight:600;
  color:#111;
}

.punico-card-address{
  font-weight:600;
  margin-bottom:4px;
  font-size:13px;
  line-height:1.35;
  color:#111;
}

.punico-card-phone{
  font-size:13px;
  color:#2e7d32;
  font-weight:500;
  margin-top:2px;
}

.punico-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1;
}

.punico-chip-ca{
  background:#eef6ea;
  color:#2f7a1f;
}

.punico-chip-green{
  background:#e9f8e5;
  color:#1f6b14;
}

.punico-chip-red{
  background:#fdeaea;
  color:#b42318;
}

.punico-chip-fail{
  background:#ffedd5;
  color:#9a3412;
}

.punico-order-form-compact{
  display:grid;
  gap:8px;
}

.punico-form-single-line{
  display:block;
}

.punico-note-label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#111;
  margin:0 0 4px;
}

.punico-note-one-line{
  min-height:36px;
}

.punico-note-readonly{
  background:#f8f8f8;
}

.punico-form-inline{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:8px;
  align-items:center;
}

.punico-compact-select{
  min-height:36px;
  padding:7px 10px;
}

.punico-pagination{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
}

/* ===== Kitchen ===== */
.punico-kitchen-menu-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.punico-kitchen-menu-card,
.punico-stat-box{
  padding:12px;
  margin-bottom:10px;
}

.punico-menu-item{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:10px;
  align-items:start;
  padding:8px 0;
  border-top:1px dashed #dbe5dc;
}

.punico-menu-item:first-child{
  border-top:none;
}

.punico-menu-item img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:10px;
}

.punico-menu-item-single{
  align-items:flex-start;
  gap:14px;
}

.punico-menu-zoom{
  display:block;
  flex:0 0 auto;
  cursor:zoom-in;
}

.punico-menu-zoom:hover{
  opacity:.96;
}

.punico-kitchen-app .punico-menu-zoom,
.punico-kitchen-app .punico-menu-item-single img{
  width:140px;
  height:140px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid #dbe5dc;
  display:block;
}

.punico-menu-content{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.punico-menu-content strong{
  display:block;
  font-size:18px;
  line-height:1.3;
  margin:0 0 8px;
}

.punico-kitchen-filter-bar,
.punico-filter-bar{
  display:flex;
  gap:12px;
  align-items:end;
  flex-wrap:wrap;
}

.punico-filter-bar label{
  min-width:180px;
}

.punico-image-lightbox[hidden]{
  display:none;
}

.punico-image-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.82);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  flex-direction:column;
}

.punico-image-lightbox img{
  max-width:min(92vw,1000px);
  max-height:82vh;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.punico-lightbox-close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border:none;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.punico-lightbox-caption{
  margin-top:12px;
  color:#fff;
  font-size:16px;
  font-weight:700;
  text-align:center;
}

body.punico-lightbox-open{
  overflow:hidden;
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .punico-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .punico-view-grid,
  .punico-kitchen-menu-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .punico-shipper-wrap,
  .punico-kitchen-app{
    padding:10px;
  }

  .punico-title-shipper,
  .punico-shipper-title{
    font-size:22px;
  }

  .punico-shipper-toolbar,
  .punico-stats-toolbar{
    grid-template-columns:1fr;
  }

  .punico-kitchen-stats,
  .punico-stats-grid,
  .punico-kitchen-menu-grid{
    grid-template-columns:1fr;
  }

  .punico-header-toolbar{
    justify-content:flex-start;
  }

  .punico-geo-status{
    min-height:36px;
    padding:7px 12px;
    font-size:12px;
  }

  .punico-action-menu-list{
    right:0;
    left:auto;
    min-width:200px;
    max-width:90vw;
  }

  .punico-order-card{
    padding:8px;
    border-radius:10px;
  }

  .punico-card-top{
    align-items:flex-start;
    gap:6px;
    margin-bottom:4px;
  }

  .punico-card-name{
    font-size:13px;
  }

  .punico-card-top-actions{
    gap:4px;
  }

  .punico-btn-mini{
    min-width:24px;
    min-height:24px;
    padding:0 4px;
    font-size:11px;
  }

  .punico-card-line-1{
    gap:4px;
    margin-bottom:3px;
  }

  .punico-card-address{
    font-size:11px;
    line-height:1.3;
    margin-bottom:6px;
  }

  .punico-chip{
    min-height:18px;
    padding:0 6px;
    font-size:10px;
  }

  .punico-form-inline{
    grid-template-columns:minmax(0,1fr) 84px;
    gap:6px;
  }

  .punico-select,
  .punico-note-one-line,
  .punico-toolbar-group input,
  .punico-toolbar-group select{
    font-size:12px;
    padding:7px 8px;
    min-height:32px;
  }

  .punico-btn{
    min-height:32px;
    font-size:11px;
    padding:0 8px;
  }

  .punico-stats-box{
    padding:12px;
    border-radius:14px;
  }

  .punico-stats-title{
    font-size:17px;
    margin-bottom:10px;
  }

  .punico-stats-preset-row{
    gap:8px;
    margin-bottom:12px;
  }

  .punico-stat-pill{
    min-height:32px;
    padding:0 12px;
    font-size:12px;
  }

  .punico-stats-toolbar{
    gap:12px;
    padding:12px;
    border-radius:12px;
  }

  .punico-stats-toolbar .punico-toolbar-group label{
    font-size:12px;
  }

  .punico-stats-toolbar input[type="date"]{
    min-height:40px;
    height:40px;
    font-size:13px;
    padding:0 12px;
  }

  .punico-stats-toolbar .punico-toolbar-actions .punico-btn{
    width:100%;
    min-width:0;
    height:40px;
    font-size:13px;
  }

  .punico-stats-range-text{
    font-size:12px;
    margin-bottom:10px;
  }

  .punico-stat-card{
    padding:12px 14px;
    border-radius:12px;
  }

  .punico-stat-label{
    font-size:12px;
    margin-bottom:4px;
  }

  .punico-stat-value{
    font-size:24px;
  }
}

/* v2.5.2 mobile layout fix */
@media (max-width: 768px){
  .punico-view-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .punico-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}