/* =========================================================
   PharmaLink Wholesaler — Production Stylesheet
   Color palette matched to the PDF design (teal pharmacy theme)
   Fully responsive: mobile ▸ tablet ▸ laptop ▸ desktop ▸ large
   ========================================================= */

:root{
  /* Brand */
  --primary:#0ea5a4;
  --primary-600:#0b8584;
  --primary-700:#08706f;
  --primary-50:#e6fafa;
  --primary-100:#ccf5f4;

  /* Accents */
  --accent:#f59e0b;
  --accent-soft:#fef3c7;
  --secondary:#1e293b;

  /* Status */
  --success:#10b981;
  --success-soft:#dcfce7;
  --success-text:#15803d;
  --danger:#ef4444;
  --danger-soft:#fee2e2;
  --danger-text:#b91c1c;
  --warning:#f59e0b;
  --warning-soft:#fef3c7;
  --warning-text:#b45309;
  --info:#3b82f6;
  --info-soft:#dbeafe;
  --info-text:#1d4ed8;

  /* Surfaces */
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --border-soft:#eef2f6;

  /* Effects */
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 2px 6px rgba(15,23,42,.05);
  --shadow:0 6px 20px rgba(15,23,42,.07);
  --shadow-lg:0 14px 40px rgba(15,23,42,.10);
  --shadow-primary:0 10px 30px rgba(14,165,164,.28);

  /* Gradients */
  --grad-primary:linear-gradient(135deg,#0ea5a4 0%,#0b8584 100%);
  --grad-header:linear-gradient(135deg,#0ea5a4 0%,#08706f 100%);
  --grad-offer:linear-gradient(135deg,#fff7ed 0%,#fef3c7 100%);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter','Segoe UI',Roboto,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

/* =========================================================
   APP SHELL — responsive container
   Mobile: full-width
   ≥768px: phone-style centered card frame
   ≥1200px: wider with subtle backdrop
   ========================================================= */
.app-shell{
  width:100%;
  max-width:480px;
  margin:0 auto;
  background:var(--card);
  min-height:100vh;
  position:relative;
  padding-bottom:90px;
}
@media(min-width:768px){
  body{background:linear-gradient(135deg,#eef7f7 0%,#f5f7fa 100%);padding:24px 0}
  .app-shell{
    margin:0 auto;
    border-radius:24px;
    overflow:hidden;
    min-height:calc(100vh - 48px);
    box-shadow:var(--shadow-lg);
  }
}
@media(min-width:1200px){
  .app-shell{max-width:520px}
}

/* =========================================================
   HEADER
   ========================================================= */
.app-header{
  background:var(--grad-header);
  color:#fff;
  padding:18px 20px 26px;
  border-bottom-left-radius:24px;
  border-bottom-right-radius:24px;
  box-shadow:var(--shadow-primary);
}
.app-header .title{font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px}
.app-header .subtitle{font-size:12px;opacity:.9;margin-top:2px}
.app-header .back{
  background:rgba(255,255,255,.18);
  border:none;color:#fff;
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.app-header .back:hover{background:rgba(255,255,255,.3)}

/* =========================================================
   CARDS / SECTIONS
   ========================================================= */
.section{padding:16px}
@media(min-width:576px){.section{padding:18px 20px}}

.card-soft{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border-soft);
  padding:16px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{border-radius:10px;font-weight:600}
.btn-primary{
  background:var(--grad-primary)!important;
  border:none!important;
  color:#fff!important;
  font-weight:600;
  padding:12px 18px;
  box-shadow:0 6px 16px rgba(14,165,164,.28);
  transition:transform .15s, box-shadow .2s;
}
.btn-primary:hover,.btn-primary:focus{
  background:var(--grad-primary)!important;
  filter:brightness(.96);
  box-shadow:0 10px 22px rgba(14,165,164,.36);
  transform:translateY(-1px);
  color:#fff!important;
}
.btn-outline-primary{
  color:var(--primary)!important;
  border:1.5px solid var(--primary)!important;
  background:transparent;
  border-radius:10px;font-weight:600;padding:11px 18px;
}
.btn-outline-primary:hover{background:var(--primary)!important;color:#fff!important}
.btn-block{width:100%}
.btn-secondary{background:var(--secondary);border-color:var(--secondary)}
.btn-danger{background:var(--danger);border-color:var(--danger)}
.btn-success{background:var(--success);border-color:var(--success)}

/* =========================================================
   FORMS
   ========================================================= */
.form-label{font-weight:600;font-size:13px;color:var(--secondary);margin-bottom:6px}
.form-control,.form-select{
  border-radius:10px;
  border:1px solid var(--border);
  padding:12px 14px;
  font-size:14px;
  background:#fff;
  color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus,.form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(14,165,164,.18);
  outline:none;
}
.form-control::placeholder{color:#9aa4b2}

/* =========================================================
   BRAND / LOGIN
   ========================================================= */
.brand-logo{
  width:84px;height:84px;border-radius:22px;
  background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:38px;margin:8px auto 14px;
  box-shadow:var(--shadow-primary);
}
.brand-name{text-align:center;font-size:24px;font-weight:800;letter-spacing:.5px;color:var(--secondary)}
.brand-tag{text-align:center;color:var(--muted);font-size:13px;margin-bottom:24px}

/* =========================================================
   WALLET CARD
   ========================================================= */
.wallet-card{
  background:var(--grad-primary);
  color:#fff;border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow-primary);
}
.wallet-card .label{font-size:13px;opacity:.92}
.wallet-card .amount{font-size:26px;font-weight:800;margin-top:4px;letter-spacing:.3px}
.wallet-card a{color:#fff;font-size:13px;text-decoration:underline;opacity:.95}

/* =========================================================
   MENU GRID
   ========================================================= */
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:420px){.menu-grid{gap:14px}}

.menu-tile{
  background:#fff;border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);
  border:1px solid var(--border-soft);
  text-align:left;display:block;
  transition:transform .15s, box-shadow .2s;
}
.menu-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.menu-tile .icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--primary-50);color:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;margin-bottom:10px;
}
.menu-tile .title{font-weight:700;font-size:14px;color:var(--secondary)}
.menu-tile .desc{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}

/* =========================================================
   LIST / ORDER / STAT CARDS
   ========================================================= */
.list-card{
  background:#fff;border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow);
  border:1px solid var(--border-soft);
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:10px;flex-wrap:wrap;
}
.list-card .name{font-weight:700;color:var(--secondary)}
.list-card .meta{font-size:12px;color:var(--muted)}

.badge-good{background:var(--success-soft);color:var(--success-text);font-size:11px;padding:4px 8px;border-radius:6px;font-weight:700}
.badge-defaulter{background:var(--danger-soft);color:var(--danger-text);font-size:11px;padding:4px 8px;border-radius:6px;font-weight:700}

.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat-card{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);border:1px solid var(--border-soft)}
.stat-card .label{font-size:12px;color:var(--muted)}
.stat-card .value{font-size:20px;font-weight:800;color:var(--secondary);margin-top:4px}

.detail-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-soft);font-size:14px}
.detail-row:last-child{border-bottom:none}
.detail-row .k{color:var(--muted)}
.detail-row .v{font-weight:600;color:var(--secondary);text-align:right}

/* =========================================================
   BOTTOM NAV
   ========================================================= */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;
  background:#fff;border-top:1px solid var(--border);
  display:flex;justify-content:space-around;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index:50;
  box-shadow:0 -4px 18px rgba(15,23,42,.06);
}
@media(min-width:1200px){.bottom-nav{max-width:520px}}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:11px;font-weight:600;padding:6px 10px;transition:color .15s}
.bottom-nav a i{font-size:18px}
.bottom-nav a.active,.bottom-nav a:hover{color:var(--primary)}

/* =========================================================
   SEARCH BAR
   ========================================================= */
.search-bar{position:relative;margin-bottom:14px}
.search-bar input{padding-left:42px;border-radius:12px;height:46px}
.search-bar i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)}

/* =========================================================
   ORDER / STATUS PILLS
   ========================================================= */
.order-card{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);border:1px solid var(--border-soft);margin-bottom:12px}
.order-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.order-card .order-id{font-weight:700;color:var(--secondary)}
.order-card .status{font-size:11px;padding:4px 10px;border-radius:20px;font-weight:700;white-space:nowrap}
.status-new{background:var(--warning-soft);color:var(--warning-text)}
.status-pending{background:var(--info-soft);color:var(--info-text)}
.status-completed{background:var(--success-soft);color:var(--success-text)}
.status-rejected{background:var(--danger-soft);color:var(--danger-text)}

/* =========================================================
   OFFER CARD
   ========================================================= */
.offer-card{background:var(--grad-offer);border-radius:var(--radius);padding:16px;border:1px dashed var(--accent);margin-bottom:12px}
.offer-card .tag{display:inline-block;background:var(--accent);color:#fff;font-size:11px;padding:3px 10px;border-radius:20px;font-weight:700;margin-bottom:6px}
.offer-card h6{font-weight:700;color:var(--secondary);margin:0 0 4px}
.offer-card p{font-size:13px;color:var(--muted);margin:0}

/* =========================================================
   TYPOGRAPHY HELPERS
   ========================================================= */
.section-title{font-size:14px;font-weight:700;color:var(--secondary);margin:18px 0 10px}
h1,h2,h3,h4,h5,h6{color:var(--secondary)}

/* =========================================================
   CHARTS
   ========================================================= */
.chart-box{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);border:1px solid var(--border-soft)}
.chart-box canvas{width:100%!important;max-height:240px!important;height:auto!important}

/* =========================================================
   TABS / PILLS
   ========================================================= */
.tab-pills{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.tab-pills::-webkit-scrollbar{height:0}
.tab-pills button{flex:0 0 auto;border:1px solid var(--border);background:#fff;color:var(--muted);padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:all .15s}
.tab-pills button.active{background:var(--grad-primary);color:#fff;border-color:transparent}

/* =========================================================
   TABLES — responsive
   ========================================================= */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;font-size:14px;color:var(--text);border-color:var(--border-soft)}
.table thead th{background:var(--primary-50);color:var(--secondary);font-weight:700;border:none}

/* =========================================================
   UTILITIES
   ========================================================= */
.text-primary-c{color:var(--primary)!important}
.bg-primary-c{background:var(--primary)!important;color:#fff}
.text-muted-c{color:var(--muted)!important}
.fw-700{font-weight:700}
.rounded-soft{border-radius:var(--radius)}
.shadow-soft{box-shadow:var(--shadow)}

/* Prevent horizontal scroll on any inner content */
.section > *,.app-shell > *{max-width:100%}

/* Selection */
::selection{background:var(--primary-100);color:var(--primary-700)}