/*
  app.css
  Master shared stylesheet for MCL Pickup Manager (mobile-first PWA)
  - Full design system: variables, layout, components, utilities
  - Load this BEFORE page-specific CSS files
  - Place at: pickup/assets/css/app.css
*/

:root{
  /* Palette */
  --bg: #f5f6fa;
  --bg-gradient: linear-gradient(135deg,#f5f6fa 0%,#e8eaf0 100%);
  --card-bg: #ffffff;
  --glass-bg: rgba(255,255,255,0.85);
  --blur: blur(14px);

  --text-main: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-light: #9ca3af;

  --accent-blue: #457b9d;
  --accent-green: #2a9d8f;
  --accent-warn: #f4a261;
  --danger: #ef4444;

  /* Sizes */
  --max-width: 480px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

  /* Spacing */
  --g-xs: 6px; --g-sm: 10px; --g: 16px; --g-lg: 24px;

  /* Motion */
  --transition-fast: all .16s cubic-bezier(.4,0,.2,1);
  --transition: all .28s cubic-bezier(.4,0,.2,1);
}

/* ==========================
   RESET / MOBILE APP MODE
   ========================== */
html,body{
  height:100%;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--bg-gradient);
  color:var(--text-main);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select:none; /* prevent accidental selection */
  user-select:none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

/* Prevent zoom on iOS/Android — ensure pages also use meta viewport: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" */

/* Global container to emulate native app width */
.app-viewport, .pickup-app, .page-wrapper{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:inherit;
}

/* make sure links/buttons don't show outlines — but remain accessible via focus styles */
:focus{outline: none;}
:focus-visible{outline: 3px solid rgba(69,123,157,0.14); outline-offset:2px}

/* Smooth scroll & momentum for mobile */
html{scroll-behavior:smooth}
body, .pickup-app{ -webkit-overflow-scrolling: touch; }

/* Typography helpers */
.h1{font-size:20px;font-weight:800}
.h2{font-size:18px;font-weight:700}
.small{font-size:13px;color:var(--text-muted)}

/* ==========================
   GLOBAL PAGE LAYOUT
   ========================== */
.header{position:sticky;top:0;z-index:120;background:var(--glass-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow);border-bottom:1px solid rgba(255,255,255,0.6);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.app-title{font-size:22px;font-weight:800;margin:0;background:linear-gradient(135deg,var(--text-main) 0%,var(--accent-blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-compact .app-title{font-size:18px}

/* content area spacing that considers the fixed bottom bar */
.content{flex:1;padding:18px 16px 110px}
.content-compact{padding-bottom:90px}

/* ==========================
   CARDS / SURFACES
   ========================== */
.card{
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  padding:14px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(0,0,0,0.03);
  transition:var(--transition);
}
.card:hover{box-shadow:var(--shadow)}

/* list/card spacing */
.list{display:flex;flex-direction:column;gap:12px}

/* small badges */
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px}

/* ==========================
   BUTTONS
   ========================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:12px;border:none;cursor:pointer;font-weight:700;transition:var(--transition)}
.btn:active{transform:scale(0.995)}

.btn-primary{background:linear-gradient(135deg,var(--accent-blue),#2f5870);color:#fff;box-shadow:0 6px 18px rgba(69,123,157,0.18)}
.btn-ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text-main)}
.btn-danger{background:linear-gradient(135deg,var(--danger),#c62828);color:#fff}
.btn-wide{width:100%}

/* primary fixed save area (bottom) */
.save-area{position:fixed;left:0;right:0;bottom:0;padding:14px;background:rgba(255,255,255,0.98);backdrop-filter:blur(8px);box-shadow:0 -6px 18px rgba(0,0,0,0.06);}
.save-area .btn{width:100%}

/* ==========================
   INPUTS / FORMS
   ========================== */
.input, input[type=text],input[type=tel],input[type=password],textarea,select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(0,0,0,0.08);background:var(--bg);font-size:15px;transition:var(--transition);outline:none;box-sizing:border-box}
.input:focus, input:focus, textarea:focus{border-color:var(--accent-blue);background:#fff;box-shadow:0 0 0 6px rgba(69,123,157,0.08)}
textarea{min-height:100px;resize:none}
label{display:block;font-weight:700;color:var(--text-muted);margin-bottom:6px}
.form-row{display:flex;gap:12px}
.form-row .col{flex:1}

/* file input preview helper */
.img-preview{width:100px;height:100px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow);border:3px solid rgba(255,255,255,0.9)}

/* ==========================
   NAVIGATION - bottom nav
   ========================== */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:72px;background:var(--card-bg);display:flex;justify-content:space-around;align-items:center;padding:8px 12px;box-shadow:0 -6px 18px rgba(0,0,0,0.06);border-top:1px solid rgba(0,0,0,0.02)}
.bottom-nav .nav-btn{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text-muted);font-weight:700;padding:6px 10px;border-radius:12px}
.bottom-nav .nav-btn.active{color:var(--accent-blue)}
.bottom-nav .pickup-badge{background:var(--danger);color:#fff;padding:4px 8px;border-radius:999px;font-size:12px;margin-top:4px}

/* Keep main page content above bottom nav on small screens */
.has-bottom-nav{padding-bottom:90px}

/* ==========================
   MODAL / SHEET
   ========================== */
.modal{position:fixed;left:0;right:0;top:0;bottom:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0.45);z-index:1200;padding:18px}
.sheet{width:100%;max-width:var(--max-width);background:var(--card-bg);border-radius:18px 18px 6px 6px;padding:18px;box-shadow:var(--shadow-lg);max-height:88vh;overflow:auto}
.modal.hidden{display:none}

/* top bar for sheets */
.sheet .grab{width:48px;height:6px;background:linear-gradient(90deg,rgba(0,0,0,0.06),rgba(0,0,0,0.12));border-radius:999px;margin:0 auto 12px}

/* ==========================
   TASK/PICKUP CARD (common)
   ========================== */
.task-card{display:flex;align-items:center;background:var(--card-bg);border-radius:14px;padding:12px;gap:12px;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,0.03)}
.task-status{width:8px;height:100%;border-radius:6px}
.task-left.pending{background:linear-gradient(180deg,var(--accent-warn),#e89b5c)}
.task-left.ontheway{background:linear-gradient(180deg,#e76f51,#d95f47)}
.task-left.done{background:linear-gradient(180deg,var(--accent-green),#248073)}

.task-info h3{margin:0;font-size:16px;font-weight:800}
.task-info p{margin:0;color:var(--text-muted);font-size:14px}

/* ==========================
   PROFILE / HEADER variants
   ========================== */
.profile-header{padding:22px 16px 32px;text-align:center}
.profile-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 12px;box-shadow:0 8px 24px rgba(0,0,0,0.12);border:4px solid rgba(255,255,255,0.9)}
.profile-name{font-size:22px;font-weight:800;margin:0}
.profile-phone{color:var(--text-muted);margin:6px 0 0}

/* ==========================
   UTILITIES
   ========================== */
.row{display:flex;gap:12px}
.col{flex:1}
.center{text-align:center}
.muted{color:var(--text-muted)}
.mt-sm{margin-top:8px}.mt{margin-top:16px}.mb{margin-bottom:16px}

/* small screens tweaks */
@media (max-width:420px){
  .app-title{font-size:20px}
  .header-inner{padding:12px}
  .content{padding:14px 12px 110px}
  .bottom-nav{height:70px}
  .profile-photo{width:84px;height:84px}
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* Scrollbar styling */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(156,163,175,0.25);border-radius:999px}

/* End of master app.css */