/* Hezmart Logistics - extra styles if needed */
.hz-input { width:100%; padding: .65rem .85rem; border:1px solid #d1d5db; border-radius: .9rem; background:#fff; }
.hz-input:focus { outline:none; box-shadow: 0 0 0 3px rgba(249,115,22,.25); border-color:#f97316; }

/* =========================================================
   Hezmart Logistics – Pro UI Kit
   Orange theme • Mobile first • Africa/Lagos
   v1.2 – 2025
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* Hezmart Orange scale */
  --hez-50:#fff7ed;
  --hez-100:#ffedd5;
  --hez-200:#fed7aa;
  --hez-300:#fdba74;
  --hez-400:#fb923c;
  --hez-500:#f97316;
  --hez-600:#ea580c;
  --hez-700:#c2410c;
  --hez-800:#9a3412;
  --hez-900:#7c2d12;

  --bg:#faf7f5;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#f0e6dc;
  --line-strong:#e5d5c5;
  --success:#059669;
  --success-bg:#ecfdf5;
  --warn:#d97706;
  --danger:#dc2626;
  --info:#0369a1;

  --radius:14px;
  --radius-lg:18px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(124,45,18,.06), 0 4px 14px rgba(234,88,12,.06);
  --shadow-md:0 6px 24px rgba(194,65,12,.10), 0 2px 8px rgba(0,0,0,.04);
  --shadow-lg:0 14px 40px rgba(194,65,12,.14);
  --ring:0 0 0 4px rgba(249,115,22,.18);

  --font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Base */
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:var(--hez-700);text-decoration:none}
a:hover{ text-decoration:underline }
h1,h2,h3{letter-spacing:-.015em}

/* ===================== BUTTONS ===================== */
/* Universal real-button look */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
.hz-btn,
a.hz-btn,
a.btn,
.button,
[role="button"].btn-like {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:var(--font);
  font-weight:700;
  font-size:14.5px;
  line-height:1.2;
  padding:.78rem 1.15rem;
  border-radius:14px;
  border:1.5px solid transparent;
  cursor:pointer;
  user-select:none;
  text-decoration:none !important;
  white-space:nowrap;
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease, opacity .18s;
  box-shadow: var(--shadow-sm);
  position:relative;
}
button:active,
.hz-btn:active,
.btn:active,
input[type=submit]:active{
  transform:translateY(1px) scale(.998);
}
button:focus-visible,
.hz-btn:focus-visible,
.btn:focus-visible,
input[type=submit]:focus-visible,
a.hz-btn:focus-visible{
  outline:none;
  box-shadow: var(--ring), var(--shadow-sm);
}

/* --- Primary (Hezmart Orange) - DEFAULT for bare <button> --- */
button,
input[type="submit"],
.btn-primary,
.hz-btn-primary,
.btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-danger):not(.btn-success):not(.btn-light),
.hz-btn:not(.hz-btn-secondary):not(.hz-btn-outline):not(.hz-btn-ghost):not(.btn-danger):not(.btn-success) {
  background: linear-gradient(180deg, var(--hez-500), var(--hez-600));
  color:#fff;
  border-color: var(--hez-600);
  text-shadow:0 1px 0 rgba(0,0,0,.08);
}
button:hover,
input[type="submit"]:hover,
.btn-primary:hover,
.hz-btn-primary:hover,
.btn:hover,
.hz-btn:hover {
  background: linear-gradient(180deg, var(--hez-600), var(--hez-700));
  box-shadow: var(--shadow-md);
  transform:translateY(-1px);
  color:#fff;
}

/* Explicit primary class – keeps compatibility */
.hz-btn-primary, .btn-primary{
  background:linear-gradient(180deg, var(--hez-500), var(--hez-600));
  color:#fff;
  border-color:var(--hez-600);
}

/* Secondary – soft */
.btn-secondary, .hz-btn-secondary, input[type="button"].secondary{
  background:#fff7f0;
  color:#9a3412;
  border-color:var(--hez-200);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover, .hz-btn-secondary:hover{
  background:#fff1e2;
  border-color:var(--hez-300);
  color:var(--hez-800);
}

/* Outline */
.btn-outline, .hz-btn-outline{
  background:#fff;
  color:var(--hez-700);
  border-color:var(--hez-400);
}
.btn-outline:hover, .hz-btn-outline:hover{
  background:var(--hez-50);
  border-color:var(--hez-500);
  color:var(--hez-800);
}

/* Ghost / link button */
.btn-ghost, .hz-btn-ghost{
  background:transparent;
  color:var(--hez-700);
  border-color:transparent;
  box-shadow:none;
}
.btn-ghost:hover, .hz-btn-ghost:hover{
  background:var(--hez-50);
  color:var(--hez-800);
}

/* Danger / Success */
.btn-danger{
  background:linear-gradient(180deg,#ef4444,#dc2626);
  color:#fff;
  border-color:#dc2626;
}
.btn-danger:hover{ background:linear-gradient(180deg,#dc2626,#b91c1c) }
.btn-success{
  background:linear-gradient(180deg,#10b981,#059669);
  color:#fff;
  border-color:#059669;
}
.btn-success:hover{ background:linear-gradient(180deg,#059669,#047857) }

/* Sizes */
.btn-sm, .hz-btn-sm{
  padding:.52rem .9rem;
  font-size:13px;
  border-radius:11px;
}
.btn-lg, .hz-btn-lg{
  padding:1rem 1.35rem;
  font-size:16px;
  border-radius:16px;
}
.btn-block, .w-full.btn, .w-full.hz-btn{ width:100%; display:flex }

/* Disabled */
button:disabled,
.hz-btn:disabled,
.btn:disabled,
input[type=submit]:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

/* Icon spacing helper */
.btn i, .hz-btn i{ font-size:.95em; opacity:.98 }

/* Make plain <a> look button-like ONLY when explicitly opted in */
a.btn, a.hz-btn, a[role="button"]{
  /* already covered above */
}
/* Subtle text link button */
.link-btn{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--hez-700) !important;
  box-shadow:none !important;
  padding:.5rem .7rem;
  font-weight:600;
}
.link-btn:hover{ background:var(--hez-50) !important; text-decoration:none !important; color:var(--hez-800) !important; }

/* ===================== FORMS ===================== */
label{
  display:block;
  font-size:13.5px;
  font-weight:650;
  color:#334155;
  margin-bottom:6px;
  letter-spacing:.01em;
}
.helptext, .form-help{
  font-size:12px;
  color:var(--muted);
  margin-top:5px;
}

/* Unified input styling - covers Django default widgets too */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
select,
textarea,
.hz-input,
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  width:100%;
  font-family:var(--font);
  font-size:15px;
  color:var(--ink);
  background:#fff;
  border:1.6px solid #d9d2ca;
  border-radius:13px;
  padding:.78rem .95rem;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
  appearance:none;
  -webkit-appearance:none;
}
textarea{ min-height:110px; resize:vertical; line-height:1.55 }
input::placeholder, textarea::placeholder{ color:#9aa4b2 }

input:focus,
select:focus,
textarea:focus,
.hz-input:focus {
  border-color:var(--hez-500);
  box-shadow: var(--ring);
  background:#fffdfb;
}

/* Valid / invalid */
input:valid:not(:placeholder-shown),
select:valid,
textarea:valid:not(:placeholder-shown){
  /* keep neutral – avoid green flash */
}
input.is-invalid, select.is-invalid, textarea.is-invalid,
input:invalid:focus, select:invalid:focus, textarea:invalid:focus{
  border-color:#f87171;
  box-shadow:0 0 0 4px rgba(248,113,113,.16);
}

/* Select – custom arrow – legit pro look */
select,
select.hz-input {
  padding-right:2.6rem;
  background-color:#fff;
  background-image:
    linear-gradient(45deg, transparent 50%, #9a7b62 50%),
    linear-gradient(135deg, #9a7b62 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
}
select:focus{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--hez-600) 50%),
    linear-gradient(135deg, var(--hez-600) 50%, transparent 50%);
}
select option{
  padding:10px 12px;
  font-size:14.5px;
  background:#fff;
  color:#1f2937;
}
select option:hover,
select option:checked{
  background:var(--hez-50);
  color:var(--hez-800);
}
select:disabled{
  background-color:#f8f5f2;
  color:#9a8f85;
  cursor:not-allowed;
}

/* Multi-select */
select[multiple]{
  background-image:none;
  padding-right:.95rem;
  min-height:140px;
}
select[multiple] option{
  border-radius:8px;
  margin:2px 4px;
  padding:8px 10px;
}
select[multiple] option:checked{
  background:linear-gradient(180deg, var(--hez-100), var(--hez-200));
  color:var(--hez-900);
  font-weight:600;
}

/* Check / radio – modern */
input[type="checkbox"],
input[type="radio"]{
  width:18px; height:18px;
  accent-color:var(--hez-600);
  cursor:pointer;
  margin-right:8px;
  vertical-align:middle;
  position:relative;
  top:-1px;
}
.form-check{
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem 0;
  font-size:14.5px;
}

/* Input groups */
.input-group{
  display:flex;
  align-items:stretch;
}
.input-group > input,
.input-group > select{
  border-radius:13px 0 0 13px;
  flex:1;
}
.input-group-append,
.input-group-prepend{
  display:flex;
  align-items:center;
  padding:0 .9rem;
  background:#fff7f0;
  border:1.6px solid #d9d2ca;
  color:#7c4a24;
  font-weight:600;
  font-size:13.5px;
  white-space:nowrap;
}
.input-group-prepend{ border-right:0; border-radius:13px 0 0 13px }
.input-group-append{ border-left:0; border-radius:0 13px 13px 0 }
.input-group > input + .input-group-append{ border-left:0 }

/* Floating / stacked form rows */
.form-row{
  display:grid;
  gap:16px;
}
@media(min-width:720px){
  .form-row-2{ grid-template-columns:1fr 1fr }
  .form-row-3{ grid-template-columns:1fr 1fr 1fr }
}

/* Field error */
.field-error, .errorlist{
  margin:6px 0 0;
  padding:0;
  list-style:none;
  color:#b91c1c;
  font-size:12.8px;
  font-weight:500;
}
.errorlist li{ margin-bottom:3px }

/* ===================== CARDS / PANELS ===================== */
.hz-card, .card, .panel{
  background:var(--card);
  border:1px solid #f2e6d8;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:18px;
}
.hz-card:hover{ box-shadow:var(--shadow-md) }

/* Statistic card accent */
.stat-card{
  border-radius:18px;
  padding:18px 18px;
  background:linear-gradient(160deg, #fff, #fffaf6);
  border:1px solid #f6e6d4;
}

/* ===================== TABLES ===================== */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}
th{
  text-align:left;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#6b7280;
  background:#faf7f4;
  padding:12px 14px;
  border-bottom:1px solid #f0e4d4;
  font-weight:750;
}
td{
  padding:13px 14px;
  border-bottom:1px solid #f4ece2;
  vertical-align:middle;
}
tr:hover td{ background:#fff9f3 }
.table-wrap{
  overflow:auto;
  border-radius:16px;
  border:1px solid #f0e4d4;
  background:#fff;
}

/* ===================== BADGES / PILLS ===================== */
.badge, .pill, .status-badge{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:.38rem .72rem;
  border-radius:999px;
  font-size:11.8px;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid transparent;
  line-height:1;
}
.badge-amber, .status-pending{
  background:#fff8e1; color:#b45309; border-color:#fde68a;
}
.badge-green, .status-completed{
  background:#ecfdf5; color:#047857; border-color:#a7f3d0;
}
.badge-red, .status-cancelled{
  background:#fef2f2; color:#b91c1c; border-color:#fecaca;
}
.badge-gray{
  background:#f3f4f6; color:#374151; border-color:#e5e7eb;
}

/* ===================== NAV / LINKS ===================== */
/* make action links in tables look button-ish */
.table-actions a,
td a[href*="/edit"],
td a[href*="/view"]{
  display:inline-block;
  font-weight:700;
  font-size:12.8px;
  padding:.42rem .72rem;
  border-radius:10px;
  border:1px solid var(--hez-200);
  background:#fff;
  color:var(--hez-700);
  text-decoration:none !important;
  transition:all .15s ease;
}
.table-actions a:hover,
td a[href*="/edit"]:hover,
td a[href*="/view"]:hover{
  background:var(--hez-50);
  border-color:var(--hez-400);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

/* Sidebar nav – keep clean, not button-ified globally */
nav a{ text-decoration:none }

/* ===================== UTILITIES ===================== */
.text-muted{ color:var(--muted) }
.text-hez{ color:var(--hez-700) }
.font-bold{ font-weight:700 }
.font-extrabold{ font-weight:800 }
.rounded-xl{ border-radius:14px }
.shadow-sm{ box-shadow:var(--shadow-sm) }
.shadow-md{ box-shadow:var(--shadow-md) }

/* Spacing helpers */
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem}
.mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem}
.p-3{padding:.75rem} .p-4{padding:1rem} .p-5{padding:1.25rem} .p-6{padding:1.5rem}

/* ===================== MOBILE ===================== */
@media (max-width:640px){
  button, .btn, .hz-btn, input[type=submit]{
    width:100%;
    padding:.9rem 1rem;
    font-size:15px;
  }
  .btn-sm{ width:auto }
  input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],select,textarea{
    font-size:16px; /* prevent iOS zoom */
    padding:.85rem .95rem;
  }
  .hz-card, .card{ border-radius:16px; padding:16px }
  th, td{ padding:10px 10px }
}

/* ===================== PRINT ===================== */
@media print{
  .no-print, nav, aside, button, .hz-btn, .btn { display:none !important }
  body{ background:#fff !important; color:#000 }
  .hz-card, .card{ box-shadow:none !important; border:1px solid #ddd }
  a{ color:#000 !important; text-decoration:none !important }
  table{ font-size:12px }
}

/* ===================== NICE EXTRAS ===================== */
/* Loading state */
.btn-loading, button.loading{
  pointer-events:none;
  opacity:.78;
  position:relative;
  color:transparent !important;
}
.btn-loading::after, button.loading::after{
  content:"";
  position:absolute;
  width:16px; height:16px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
  left:50%; top:50%;
  margin:-8px 0 0 -8px;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Focus ring helper for custom elements */
.focus-ring:focus{ outline:none; box-shadow:var(--ring) }

/* Pill input (search) */
.input-pill{
  border-radius:999px !important;
  padding-left:1.15rem;
  padding-right:1.15rem;
}

/* Django form ul.errorlist beautify */
ul.errorlist{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#b91c1c;
  border-radius:12px;
  padding:10px 14px !important;
  margin:8px 0;
}

/* Make Django's default select multiple prettier */
select[multiple].hz-input{ min-height:150px }

/* Nice file input */
input[type="file"]{
  padding:.6rem;
  background:#fffdf9;
  border:1.6px dashed #e9c9a8;
  border-radius:13px;
  font-size:14px;
  cursor:pointer;
}
input[type="file"]:hover{ border-color:var(--hez-400); background:#fff7ef }

/* ===================== COMPAT – keep old Tailwind class names working ===================== */
.hz-input{ /* already covered by input/select/textarea rules above – this keeps specificity high */
  width:100%;
  font-family:var(--font);
  font-size:15px;
  color:var(--ink);
  background:#fff;
  border:1.6px solid #d9d2ca;
  border-radius:13px;
  padding:.78rem .95rem;
  outline:none;
  transition:border-color .16s, box-shadow .16s, background .16s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.hz-input:focus{ border-color:var(--hez-500); box-shadow:var(--ring); background:#fffdfb }

.hz-card{ background:var(--card); border:1px solid #f2e6d8; border-radius:18px; box-shadow:var(--shadow-sm); }
.hz-btn{ /* inherits from button rules */ }
.hz-btn-primary{ background:linear-gradient(180deg, var(--hez-500), var(--hez-600)); color:#fff; border-color:var(--hez-600) }
.hz-btn-secondary{ background:#fff7f0; color:#9a3412; border-color:var(--hez-200) }
.hz-btn-outline{ background:#fff; color:var(--hez-700); border-color:var(--hez-400) }
.hz-btn-ghost{ background:transparent; color:var(--hez-700); border-color:transparent; box-shadow:none }

/* End Hezmart UI Kit */