/* MGR Casa mobile — spacing from theme/spacing.ts, tab bar from CurvedTabBar.tsx */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,system-ui,sans-serif;
  background:var(--m-canvas);
  color:var(--m-text);
  width:390px;height:844px;
  overflow:hidden;
}
.m-app{
  display:flex;flex-direction:column;
  height:100%;
  padding-top:47px;
  position:relative;
  background:var(--m-canvas);
}

/* Dashboard hero — matches DashboardScreen hero + Screen contentTop */
.m-body{
  flex:1;overflow:hidden;
  padding:8px 16px 94px;
}
.m-hero{margin-bottom:16px;flex-shrink:0}
.m-hero-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.m-hero-text{flex:1;min-width:0}
.m-hero h1{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.3px;color:var(--m-text)}
.m-hero p{margin-top:4px;font-size:14px;color:var(--m-text-sec);line-height:1.25}
.m-menu{
  width:36px;height:36px;border-radius:18px;border:none;
  background:var(--m-icon-muted);color:var(--m-primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.m-menu ion-icon{font-size:22px}

.m-card{
  background:var(--m-white);
  border-radius:16px;
  border:1px solid var(--m-border);
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 1px 4px rgba(15,23,42,.06);
}
.m-card.m-gauge{
  display:flex;flex-direction:column;align-items:center;
  padding:16px 12px;
  margin-bottom:16px;
}
.m-gauge-wrap{
  position:relative;width:260px;height:135.2px;
  margin:0 auto;display:flex;align-items:flex-end;justify-content:center;
  padding-top:16px;
}
.m-gauge-wrap svg{display:block;flex-shrink:0;overflow:visible}
.m-gauge-c{
  position:absolute;bottom:4px;left:0;right:0;
  text-align:center;pointer-events:none;
}
.m-gauge-c span{
  display:block;font-size:12px;font-weight:600;letter-spacing:1px;
  color:var(--m-text-sec);text-transform:uppercase;
}
.m-gauge-c strong{
  display:block;font-size:40px;font-weight:800;line-height:1.05;
  margin-top:2px;color:var(--m-text);
  font-variant-numeric:tabular-nums;
}
.m-status-row{
  display:flex;width:100%;align-self:stretch;
  margin-top:16px;padding-top:12px;
  border-top:1px solid var(--m-border);
}
.m-sc{flex:1;text-align:center}
.m-sc span{
  display:block;font-size:10px;font-weight:700;color:var(--m-text-sec);
  letter-spacing:.5px;line-height:1.2;
}
.m-sc strong{
  display:block;font-size:22px;font-weight:800;margin-top:4px;
  color:var(--m-text);font-variant-numeric:tabular-nums;
}

.m-metrics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.m-met{
  flex:1 1 calc(50% - 4px);min-width:46%;
  background:var(--m-white);border-radius:16px;
  border:1px solid var(--m-border);
  padding:16px 12px;
}
.m-met span{font-size:13px;font-weight:500;color:var(--m-text-sec)}
.m-met strong{display:block;font-size:24px;font-weight:800;margin-top:8px}
.m-met small{display:block;font-size:12px;color:var(--m-text-sec);margin-top:4px}

.m-sec{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px}
.m-sec h3{font-size:18px;font-weight:700}
.m-sec a{font-size:14px;font-weight:600;color:var(--m-primary);text-decoration:none}

.order-card{
  background:var(--m-white);border-radius:16px;
  border:1px solid var(--m-border);
  padding:12px;margin-bottom:12px;
  box-shadow:0 1px 4px rgba(15,23,42,.06);
}
.order-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.order-name{font-size:16px;font-weight:600;flex:1;line-height:1.3}
.order-amt{font-size:16px;font-weight:700}
.order-meta{display:flex;justify-content:space-between;margin-top:6px;font-size:13px;color:var(--m-text-sec)}
.order-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pill{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 7px;border-radius:999px;
  font-size:11px;font-weight:600;line-height:1.2;
}
.pill ion-icon,.pill .mdi{font-size:11px;width:11px;height:11px}
.pill-bordered{border:.5px solid var(--m-border);background:var(--m-white);color:var(--m-text)}
.delivery-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.delivery-date{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--m-text-sec);flex:1;min-width:0}
.delivery-date ion-icon{font-size:14px;flex-shrink:0}
.m-search{
  margin-bottom:10px;padding:10px 14px 10px 36px;
  background:var(--m-white);border:.5px solid var(--m-border);
  border-radius:12px;font-size:14px;color:var(--m-text-sec);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3 3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center;
}

/* Curved tab bar — CurvedTabBar + TabBarSideArcs */
.m-tabs-wrap{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--m-surface);
  border-top:.5px solid var(--m-border);
  padding-bottom:20px;
  z-index:20;
  overflow:visible;
}
.m-tabs{
  display:flex;align-items:flex-end;
  min-height:60px;
  padding:6px 0 4px;
  background:var(--m-white);
  overflow:visible;
}
.m-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:4px;
  min-height:50px;
  font-size:12px;font-weight:500;
  color:var(--m-tab-inactive);
  text-decoration:none;
}
.m-tab.active{color:var(--m-tab-active);font-weight:600}
.m-tab-slot{
  width:64px;height:32px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:visible;
}
.m-tab-slot .m-tab-pill{
  position:absolute;inset:0;
  background:var(--m-pill);border-radius:999px;z-index:0;
}
.m-tab-icon{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;
}
.m-tab ion-icon,.m-tab .mdi{font-size:22px}