/* ======================================================
   Shipping App – AL FARES Theme (assets/css/main.css)
   Cleaned & Consolidated
   ====================================================== */

/* ===== Brand Palette (from logo) ===== */
:root{
  --red:#C32227;          /* primary brand red */
  --red-dark:#9E1C20;     /* darker hover red */
  --charcoal:#4A4A4A;     /* logo grey */
  --muted:#7B7B7B;
  --bg:#f7f7f9;           /* app background */
  --card:#ffffff;
  --text:#222;
  --border:#e9e9ee;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* ===== Reset-ish ===== */
*, *::before, *::after{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  line-height:1.4;
}

/* ===== Links & Buttons ===== */
a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }

.btn, button, input[type="submit"]{
  appearance:none; -webkit-appearance:none;
  background:var(--red); color:#fff;
  padding:.6rem .9rem; border:none; border-radius:10px;
  cursor:pointer; font-weight:700;
  box-shadow:0 2px 8px rgba(195,34,39,.22);
  transition:transform .05s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover, button:hover, input[type="submit"]:hover{
  background:var(--red-dark);
  box-shadow:0 4px 14px rgba(195,34,39,.28);
}
.btn:active, button:active{ transform: translateY(1px); }

/* Outline / “Cancel” button – visible on white bg */
.btn.outline, button.outline{
  background:#fff; color:var(--red);
  border:2px solid var(--red); box-shadow:none; font-weight:700;
  transition: all .2s ease;
}
.btn.outline:hover, button.outline:hover{
  background:rgba(195,34,39,.06); color:var(--red-dark); border-color:var(--red-dark);
}

/* Spacing between consecutive buttons */
.btn + .btn, button + button { margin-left: 8px; }

/* ===== Form Controls ===== */
label{ display:block; font-weight:600; margin:8px 0 4px; }
input, select, textarea{
  width:100%; padding:.65rem .75rem;
  border:1px solid var(--border); border-radius:10px;
  background:#fff; color:var(--text); outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(195,34,39,.12);
}
input[readonly]{ background:#fafafa; color:#555; }

/* ===== Mobile Topbar (hamburger) ===== */
.mobile-topbar{
  display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 12px; background:#fff; border-bottom:1px solid var(--border);
}
.mobile-topbar #sidebarToggle{
  border:none; background:var(--red); color:#fff; width:40px; height:40px;
  border-radius:10px; font-size:18px; cursor:pointer;
}
.mobile-topbar .mobile-brand{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--charcoal); }
.mobile-topbar .mobile-brand img{ height:28px; width:auto; }

/* ===== Sidebar & Layout ===== */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:260px;
  background:#fff; border-right:1px solid var(--border);
  padding:16px; z-index:1000; display:flex; flex-direction:column;
  transform:translateX(0); transition:transform .25s ease;
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; margin:6px 0 18px; }
.sidebar .brand img{ width:42px; height:auto; }
.sidebar .brand .brand-text{ line-height:1.1; }
.sidebar .brand .brand-text strong{ color:#222; font-size:18px; }
.sidebar .brand .brand-text small{ color:var(--muted); font-size:12px; }

.sidebar nav{ display:flex; flex-direction:column; gap:6px; overflow-y:auto; }
.sidebar nav a{
  display:block; color:#333; text-decoration:none; padding:10px 12px;
  border-radius:10px; margin:2px 0; font-weight:600;
}
.sidebar nav a:hover{ background:rgba(195,34,39,.08); color:#111; }

/* Backdrop for mobile */
#sidebarBackdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:900; opacity:0;
  transition:opacity .2s ease; pointer-events:none;
}
#sidebarBackdrop.show{ opacity:1; pointer-events:auto; }

/* Content area */
.content{ margin-left:260px; padding:24px; min-height:100vh; }
.topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }

/* ===== Cards / Panels / Tables ===== */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:2rem; }
.card{ background:var(--card); border-radius:16px; box-shadow:var(--shadow); padding:16px; }
.grid-2{ display:grid; grid-template-columns:1fr; gap:2rem; margin-top:2rem; }
@media (min-width:900px){ .grid-2{ grid-template-columns:1fr 1fr; } }
.panel{ background:var(--card); border-radius:16px; padding:24px; box-shadow:var(--shadow); }

.table{
  width:100%; border-collapse:collapse; background:var(--card);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow); margin:0 0 18px;
}
.table thead th{
  background:#fafafa; text-align:left; font-weight:700; font-size:.92rem;
  border-bottom:1px solid var(--border);
}
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--border); }
.table tr:last-child td{ border-bottom:none; }
.table td .btn{ padding:.45rem .7rem; font-size:.85rem; }

/* Toolbar */
.toolbar{ display:flex; gap:10px; align-items:center; margin:14px 0; flex-wrap:wrap; }
.toolbar input[type="text"], .toolbar select{ width:auto; min-width:220px; }

/* ===== Drawer (right panel) ===== */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.35); display:none; z-index:999;
}
/* Make overlay visible when open */
.drawer-overlay.open { display:block; }

.drawer{
  position:fixed; top:0; right:0; height:100vh; width: 380px; max-width: 95vw;
  background:#fff; box-shadow:-8px 0 24px rgba(0,0,0,.12);
  transform: translateX(100%); transition: transform .25s ease;
  z-index:1000; display:flex; flex-direction:column;
}
.drawer.open{ transform: translateX(0); }
.drawer-header{ padding:14px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.drawer-body{ padding:16px; display:grid; gap:12px; }
.drawer-actions{ padding:12px 16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
.drawer label{ display:flex; flex-direction:column; gap:6px; font-weight:600; }
.drawer input{ padding:8px; border:1px solid var(--border); border-radius:10px; font-weight:400; }

/* ===== Alerts ===== */
.alert{
  background:#fff3f3; color:#8a1c20; padding:10px 12px; border:1px solid #f0c7c9;
  border-radius:10px; margin:8px 0 12px;
}

/* ===== Toast (popup) ===== */
.toast{
  position:fixed; right:18px; bottom:18px;
  background:#fff; color:var(--text);
  border:2px solid var(--red); border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.15);
  padding:10px 14px; max-width:360px; z-index:4000;
  opacity:0; transform:translateY(8px); transition:all .25s ease;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.success{ border-color:#2e7d32; }
.toast.error{ border-color:#b00020; }
.toast .title{ font-weight:700; margin-bottom:4px; }
.toast .msg{ font-size:.95rem; }

/* ===== Login – professional layout ===== */
.login-page{
  background: radial-gradient(1200px 500px at 100% 0, rgba(195,34,39,.12), transparent 60%),
              radial-gradient(900px 500px at 0 100%, rgba(195,34,39,.08), transparent 60%),
              var(--bg);
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-wrap{ display:grid; grid-template-columns:1fr; gap:18px; width:min(1080px, 96vw); }
@media (min-width:980px){ .login-wrap{ grid-template-columns:520px 1fr; } }

.login-card{
  background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px 22px 16px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.login-brand img{ width:54px; height:auto; }
.login-brand .brand-text h1{ margin:0; font-size:22px; letter-spacing:.3px; color:#222; }
.login-brand .brand-text p{ margin:0; font-size:12px; color:var(--muted); }
.login-card form{ display:grid; gap:.75rem; }
.login-card input{ width:100%; padding:12px; border:1px solid #ddd; border-radius:10px; background:#fff; }
.login-card .alert{ margin-top:8px; }
.btn.full{ width:100%; }
.login-card .login-meta{ margin-top:14px; color:var(--muted); }

.login-aside{
  background: linear-gradient(135deg, #fff, #fff 20%, rgba(195,34,39,.07) 65%, rgba(195,34,39,.12));
  border:1px solid var(--border); border-radius:18px; min-height:260px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,.05);
}
.login-aside .aside-content{ padding:32px; text-align:center; color:#333; }
.login-aside h2{ margin:0 0 8px; color:#222; }
.login-aside p{ margin:0; color:#555; }

/* (Backward-compat for older login markup if used somewhere) */
body.login{
  display:grid; place-items:center; min-height:100vh;
  background: radial-gradient(1000px 450px at 100% 0, rgba(195,34,39,.1), transparent 60%),
              radial-gradient(700px 450px at 0 100%, rgba(195,34,39,.06), transparent 60%),
              var(--bg);
}

/* ===== Utilities ===== */
.hidden{ display:none !important; }
.text-muted{ color:var(--muted); }
.center{ text-align:center; }
.right{ text-align:right; }

/* NEW utility: margin-top:14px for headings previously inline */
.mt-14{ margin-top:14px; }

/* NEW utility: responsive grid used in credit form */
.grid-auto{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

/* NEW: generic right-aligned action row for forms */
.actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:12px;
}

/* Ensure the extra whish fields are hidden by default; JS toggles this */
#whishFields{ display:none; }

/* ===== Responsive Sidebar Collapse ===== */
@media (max-width: 900px){
  .mobile-topbar{ display:flex; }
  .content{ margin-left:0; padding:16px; }
  .sidebar{ width:280px; transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); }
  .sidebar[aria-hidden="true"]{ transform:translateX(-100%); }

  /* Drawer width on small screens */
  .drawer{ width: 95vw; }
}
/* Unpaid table action buttons */
.table td.actions-cell{ text-align:right; }

/* Desktop+ : keep all actions on one line */
@media (min-width: 700px){
  .btn-group{ display:inline-flex; gap:8px; align-items:center; white-space:nowrap; }
  /* avoid double spacing since we already use gap */
  .btn-group .btn + .btn{ margin-left:0; }
}

/* Mobile: allow wrapping but keep a tidy right alignment */
@media (max-width: 699px){
  .btn-group{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
  .btn-group .btn + .btn{ margin-left:0; }
}
#unpaid td.actions-cell { text-align: left; }
#unpaid td.actions-cell .btn-group { justify-content: flex-start; }
.toggle {
    --w: 54px; --h: 30px; --p: 3px;
    position: relative; width: var(--w); height: var(--h);
    border-radius: 999px; background:#e5e7eb; cursor: pointer; transition: background .2s ease;
    display:inline-flex; align-items:center; padding:var(--p);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
    vertical-align: middle;
  }
  .toggle input { position:absolute; inset:0; opacity:0; cursor:pointer; }
  .toggle .knob {
    width: calc(var(--h) - var(--p) * 2); height: calc(var(--h) - var(--p) * 2);
    background:#fff; border-radius:50%; transition: transform .22s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  }
  .toggle:has(input:checked) { background:#22c55e; }
  .toggle:has(input:checked) .knob { transform: translateX(calc(var(--w) - var(--h))); }
  .muted-note { font-size:.85rem; color:#6b7280; margin-left:10px; }/* Actions cell: keep buttons aligned and wrapping nicely */
.table td.actions-cell { text-align: right; }
.table td.actions-cell .btn-group { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* ===== Global Loading UI ===== */
#topProgress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: var(--red, #C32227); z-index: 9999; box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.06));
  transition: width .25s ease, opacity .3s ease;
}
#pageLoader{
  position: fixed; inset:0; background: rgba(255,255,255,.75);
  backdrop-filter: blur(2px); z-index: 9998; display:none;
}
#pageLoader.active{ display:block; }
#pageLoader .loader-card{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; border-radius:16px; padding:22px 26px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; align-items:center; gap:10px; min-width:220px;
}
#pageLoader .loader-card img{ width:40px; height:auto; opacity:.9; }
#pageLoader .spinner{
  width:26px; height:26px; border:3px solid #eaeaea; border-top-color: var(--red, #C32227);
  border-radius:50%; animation: spin 1s linear infinite;
}
#pageLoader .hint{ font-weight:700; color:#333; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Content fade-in so new pages feel smoother */
.content{ opacity:0; transition: opacity .25s ease; }
.content.ready{ opacity:1; }

/* Shimmer skeletons (optional, use while specific panels fetch data) */
.skeleton{ position:relative; overflow:hidden; background:#eee; border-radius:10px; }
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #topProgress{ transition:none; }
  .content{ transition:none; }
  #pageLoader .spinner{ animation: spin 1.4s linear infinite; }
}