/*  ----------------------------------------------------------
    JHK Logistics – Tracking + Admin UI
    Aligns with modern site palette and spacing
    ---------------------------------------------------------- */

/*  ---------- Design Tokens ---------- */
:root{
  /* brand – match modern.css */
  --clr-primary-900:#1A4D37;    /* dark forest green */
  --clr-primary-600:#2D6A4F;    /* primary forest green */
  --clr-accent:#0077B6;         /* ocean blue */
  --clr-warn:#F59E0B;           /* amber */

  /* neutrals */
  --clr-bg:#ffffff;
  --clr-surface:#f9fafb;
  --clr-border:#e5e7eb;
  --clr-text-900:#111827;
  --clr-text-600:#4b5563;

  /* radius / shadow */
  --radius-sm:8px;
  --radius-lg:12px;
  --shadow:0 4px 10px rgba(0,0,0,.06);

  /* typography */
  --fz-base:16px;
  --fz-sm:.875rem;
  --fz-h1:clamp(2rem,5vw + .5rem,3rem);

  --transition:.18s ease-in-out;
}

/*  ---------- Global reset ---------- */
*,
*::before,
*::after{box-sizing:border-box;}

html{font-size:var(--fz-base);}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--clr-text-900);
  background:var(--clr-bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/*  ---------- Section / container alignment ---------- */
.section{width:min(96%,1100px);margin:30px auto;}
h1,h2,h3{margin:.25rem 0 1rem;line-height:1.2}
h2{font-size:clamp(1.25rem,2.5vw,1.6rem);}

/*  ---------- Layout helpers ---------- */
.container{
  width:min(96%,1100px);
  margin-inline:auto;
}
.grid{
  display:grid;
  gap:1.5rem;
}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}

/*  ---------- Hero banner ---------- */
.hero{
  position:relative;
  min-height:340px;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;
  padding:2.5rem 1rem;
  color:#fff;
  background:
      linear-gradient(125deg,rgba(26,77,55,.9),rgba(0,119,182,.7)),
      url('../img/hero-plane.jpg') center/cover no-repeat;
}
.hero h1{
  font-size:var(--fz-h1);
  letter-spacing:.025em;
  margin:.25rem 0 1rem;
  text-transform:uppercase;
  font-weight:700;
}

/*  ---------- Track-form enhancements ---------- */
/* Override quick-track container for better sizing */
.quick-track {
  max-width: 700px !important;
  padding: 2rem !important;
}
.track-form .form-group{
  display:flex;
  gap:1rem;
  align-items:stretch;
  width:100%;
  max-width:650px;
}

.track-input{
  flex:1;
  padding:1rem 1.25rem !important;
  font-size:1.1rem !important;
  min-width:280px;
  height:auto;
}

.track-form .btn{
  padding:1rem 2.5rem !important;
  font-size:1rem !important;
  white-space:nowrap;
  min-height:auto;
  height:auto;
  min-width:160px;
  flex-shrink:0;
}

/*  ---------- Status badge ---------- */
.status-badge{
  display:inline-block;
  padding:.55rem 1.4rem;
  border-radius:9999px;
  font-weight:700;
  color:#fff;
  background:var(--clr-accent);
  margin-block:1.5rem;
  text-transform:capitalize;
  box-shadow:var(--shadow);
}
.is-hold{background:var(--clr-warn);color:#000;}
.is-delivered{background:var(--clr-primary-900);}

/*  ---------- Card ---------- */
.card{
  padding:1.4rem 1.6rem;
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.card h3{
  margin:.2rem 0 1rem;
  font-size:1.05rem;
  color:var(--clr-primary-600);
  letter-spacing:.02em;
}
.card p{margin:.2rem 0;color:var(--clr-text-600);}

/*  ---------- Detail list ---------- */
.details{
  display:grid;gap:1rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  list-style:none;
  padding:0;margin:0;
}
.details li{white-space:nowrap;}
.details li strong{color:var(--clr-primary-600);font-weight:600;}

/*  ---------- History table ---------- */
.table-wrapper{overflow-x:auto;margin-top:1.5rem;}
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  min-width:640px;
}
thead th{
  background:var(--clr-primary-600);
  color:#fff;
  padding:.85rem .9rem;
  font-size:var(--fz-sm);
  text-align:left;
  letter-spacing:.03em;
}
tbody td{
  padding:.7rem .9rem;
  border-top:1px solid var(--clr-border);
  font-size:.95rem;
}
tbody tr:nth-child(even){background:#f9fcff;}

/* Mobile form responsiveness */
@media(max-width:768px){
  .track-form .form-group{
    flex-direction:column;
    gap:1rem;
  }
  
  .track-input{
    min-width:100%;
    width:100%;
  }
  
  .track-form .btn{
    width:100%;
    padding:1.25rem 2rem !important;
  }
}

@media(max-width:480px){
  .track-input{
    font-size:1rem !important;
    padding:0.875rem 1rem !important;
  }
}

/*  ---------- Map container ---------- */
#map{
  width:100%;
  height:320px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  margin-block:1.5rem;
}

/*  ---------- Buttons / links ---------- */
.btn{
  display:inline-block;
  padding:.65rem 1.4rem;
  background:var(--clr-accent);
  color:#fff;text-decoration:none;
  border-radius:var(--radius-sm);
  font-weight:600;
  transition:var(--transition);
}
.btn:hover{filter:brightness(1.08);}
a{color:var(--clr-accent);} 
a:hover{text-decoration:underline;}
  
/*  ---------- Toasts ---------- */
.admin-toast{padding:.7rem 1rem;border-radius:8px;margin:0 0 1rem;box-shadow:var(--shadow);}
.admin-toast--success{background:#E6FFED;border:1px solid #A7F3D0;color:#065F46;}
.admin-toast--error{background:#FEF2F2;border:1px solid #FCA5A5;color:#7F1D1D;}

/*  ---------- Admin Header / Footer ---------- */
.admin-header{
  background: linear-gradient(135deg, var(--clr-primary-600), var(--clr-accent));
  color:#fff;
  box-shadow:var(--shadow);
}
.admin-header__inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;}
.admin-brand{display:flex;align-items:center;gap:.9rem;}
.admin-logo{width:auto;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));}
.admin-title{font-weight:700;letter-spacing:.02em}
.admin-subtitle{opacity:.9;font-size:.875rem}

.admin-footer{background:#f3f4f6;border-top:1px solid var(--clr-border);margin-top:2rem;}
.admin-footer__inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem;flex-wrap:wrap}
.admin-footer__brand{display:flex;align-items:center;gap:.6rem;color:var(--clr-text-600)}
.admin-footer-logo{width:auto;opacity:.9}
.admin-footer__note{color:var(--clr-text-600);font-size:.9rem}

/*  ---------- Admin forms (create/edit) ---------- */
label{display:block;margin:.8rem 0 .35rem;font-weight:600;color:var(--clr-text-900);} 
input, select, textarea{
  width:320px; max-width:100%; padding:.55rem .6rem; 
  border:1px solid var(--clr-border); border-radius:8px; 
  font-size:1rem; background:#fff; color:var(--clr-text-900);
}
textarea{min-height:84px}
button, input[type=submit]{
  background:var(--clr-primary-600); color:#fff; border:0; padding:.55rem 1.2rem; 
  border-radius:8px; cursor:pointer; transition:var(--transition);
}
button:hover, input[type=submit]:hover{filter:brightness(1.05)}

/* compact tables on small screens */
@media(max-width:720px){
  table{min-width:520px}
}

/*  ---------- Tracking Page Background ---------- */
/* Professional subtle background for tracking results */
body.tracking-page {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
}

.tracking-results-bg {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  position: relative;
  padding: 2rem 0;
  box-shadow: 0 0 50px rgba(79, 172, 254, 0.1);
  margin: 2rem auto;
  max-width: 95%;
  border-radius: 20px;
}

.tracking-results-bg .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.tracking-results-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.04)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
  border-radius: 20px;
}

/*  ---------- Animated Status Badges ---------- */
.status-badge-animated {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

.status-progress {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: white;
  animation: pulse-progress 2s ease-in-out infinite;
}

.status-hold {
  background: linear-gradient(45deg, #f093fb, #f5576c);
  color: white;
  animation: pulse-hold 3s ease-in-out infinite;
}

.status-delivered {
  background: linear-gradient(45deg, #4facfe, #43e97b);
  color: white;
  animation: pulse-delivered 1.5s ease-in-out infinite;
}

.status-unknown {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
}

@keyframes pulse-progress {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(79,172,254,0.3); }
  50% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(79,172,254,0.5); }
}

@keyframes pulse-hold {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes pulse-delivered {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.print-btn {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.print-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.header-left, .header-right {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.header-right {
  align-items: flex-end;
  text-align: right;
}

.shipment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}

/*  ---------- Tracking Page Styles ---------- */
/* Alert Messages */
.alert {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: var(--radius-lg);
  margin-bottom: 3rem;
  box-shadow: var(--shadow);
}

.alert-error {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #7F1D1D;
}

.alert-warning {
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  color: #92400E;
}

.alert-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
}

.alert-content h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
}

.alert-content p {
  margin: 0 0 0.75rem 0;
}

/* Shipment Card */
.shipment-card {
  background: var(--clr-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
  overflow: hidden;
}

.shipment-header {
  background: linear-gradient(135deg, var(--clr-primary-600), var(--clr-accent));
  color: #fff;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.shipment-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #fff;
}

.tracking-number {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.tracking-number .label {
  opacity: 0.9;
}

.tracking-number .number {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

.shipment-details {
  padding: 2rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.detail-item:hover {
  background: var(--gray-100);
}

.detail-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-blue);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.detail-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-900);
}

/* Status Colors */
.status-delivered { color: #10b981; }
.status-in-transit { color: #3b82f6; }
.status-pending { color: #f59e0b; }
.status-delayed { color: #ef4444; }
.status-unknown { color: var(--gray-600); }

/* History Timeline */
.history-section {
  margin-top: var(--space-3xl);
}

.history-section h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-xl);
  color: var(--gray-900);
}

.timeline {
  position: relative;
  padding-left: var(--space-2xl);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gray-200);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-2xl);
}

.timeline-marker {
  position: absolute;
  left: -30px;
  top: 4px;
  width: 20px;
  height: 20px;
  background: var(--gray-300);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.625rem;
}

.timeline-item.active .timeline-marker {
  background: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.2);
}

.timeline-content {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.timeline-item.active .timeline-content {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-md);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
  gap: var(--space-lg);
}

.timeline-header h4 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--gray-900);
}

.timeline-date {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
  white-space: nowrap;
}

.timeline-location {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--gray-600);
  font-size: 0.875rem;
  margin-top: var(--space-sm);
}

.timeline-location i {
  color: var(--accent-orange);
}

/* Map Section */
.map-section {
  margin-top: var(--space-3xl);
}

.map-section h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-xl);
  color: var(--gray-900);
}

.map-container {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Responsive Design */
@media (max-width: 768px) {
  .tracking-results-bg {
    margin: 1rem;
    max-width: calc(100% - 2rem);
    border-radius: 15px;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
  
  .shipment-header {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  
  .header-right {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
  
  .timeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .timeline-date {
    white-space: normal;
  }
  
  .tracking-number {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/*  ---------- Print styles ---------- */
@media print{
  nav,footer,.hero,.track-form{display:none!important;}
  body{background:#fff!important;color:#000;margin:0;}
  .tracking-results-bg{background:#fff!important;box-shadow:none!important;}
  .container{width:100%;padding:0;}
  .map-section, .map-container, #shipment-map{display:none!important;}
  .status-badge-animated{background:#2d6a4f!important;color:white!important;}
  .print-btn{display:none!important;}
  a[href]::after{content:"";}
}